jQuery Effects in PHP While Loop - php

Question

Ok I have a list of featured paintings to show on the Index.
I am displaying them using a while loop to get the details from the database.
I want to create a jQuery effect for when the user hovers over the image, the div of that picture appears.
The problem is is that if i were to hover on the first one, the first one's div is ok, but if i were to hover and leave the second one, it would affect the first one. Code below:
Script
<script>
$(document).ready(function(){
$("#featuredImage img").hover(function(){
$("#details").fadeOut();
});
});
</script>
PHP While
<ul id="featured">
<?php
$result = mysqli_query($con,"SELECT * FROM paintings WHERE featured=1");
while($row = mysqli_fetch_array($result))
{
$id = $row['id'];
$name = $row['name'];
$desc = $row['longDesc'];
$cost = $row['cost'];
$qty = $row['quantity'];
$img = $row['imageFilename'];
$type = $row['type'];
echo "
<li id='featuredImage'>
<div id='featuredImage'><div id='details'>$name</div><img src='/$img'></div>
</li>";
}
?>
</ul>

Answer 1

Try this:
$(document).ready(function(){
$(".featuredImage img").hover(function(){
$(this).siblings(".imgDetails").fadeOut();
});
});
ID's are meant to be unique, use classes instead to match my code above... something like this:
<li class='imageWrap'>
<div class='featuredImage'><div class='imgDetails'>$name</div><img src='/$img'></div>
</li>
Demonstration: http://jsfiddle.net/UHXqd/

Answer 2

What your trying to do is easy to achieve:
Basically change $("#details").fadeOut(); to $(this).siblings("#details").fadeOut();.
But there are other things wrong with your code too:
You have multiple domElements with the same ID, what is quite unfortunate, IDs should be unique.
My advice: change the echo to
<li class='imageContainer'>
<div class='featuredImage'><div class='details'>$name</div><img src='/$img'></div>
</li>
And from here on dont use the '#' in the selectors, use the '.' to select classes, not ids.
$(".featuredImage img").hover(function(){
$(this).siblings(".details").fadeOut();
});
You should use siblings() because the details-div is on the same level as the image.