Jquery hover effect for each row in php query - php

Question

For starters, here is my php:
$id2 = mysql_real_escape_string($id2);
$getdata8 = mysql_query("SELECT * FROM musicbook WHERE identify='$identify' ORDER BY id DESC LIMIT 20");
$numrowsgetdata = mysql_num_rows($getdata8);
if ((mysql_num_rows($getdata8))<1)
{
echo "<i>Be the first to say something?</i><p/>";
}
while ($row8 = mysql_fetch_assoc($getdata8))
{
$id8 = $row8['id'];
$name8 = $row8['name'];
$message8 = $row8['message'];
$message10 = nl2br($message8);
$date8 = $row8['date'];
if ($name8==$username)
{
echo "
<div class='messagediv' style='background:#1A1A1A;'><div style='padding:5px;'>$message10<br/>
<div style='margin-top:4px; font-size:.8em; float:left;'><div style='float:left;'><a href='http://www.pearlsquirrel.com/$name8' style='color:white;'>$name8</a><font style='color:#D6D6D6'> on $date8</font></div>
<input type='hidden' id='wpm2' value='$id8'><input type='button' id='deletelistenchat' class='deletelistenchat' style='display:none;' onclick='LinkOnClick2($id8); loadlistenchat();' value='(delete?)' /></div></div></div>
";
}
else
{
echo "
<div class='messagediv'><div style='padding:5px;'>$message10<br/>
<div style='margin-top:4px; font-size:.8em; float:left;'><div style='float:left;'><a href='http://www.pearlsquirrel.com/$name8' style='color:white;'>$name8</a><font style='color:#D6D6D6'> on $date8</font></div>
</div></div></div>";
}
}
if($numrowsgetdata >= 20)
{
echo "<div id='loadingcomments'><img src='loading.gif' style='height:30px; width:30px;'></div>";
}
?>
Here is my jquery:
$('.messagediv').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
document.getElementById('deletelistenchat').style.display='block';
} else {
document.getElementById('deletelistenchat').style.display='none';
}
});
Now what I want to happen is that for each .messagediv div when you hover over it, it shows the delete button, #deletelistenchat. However, it only works for the last row of each mysql query and I want the hover effect to work on each one as a user hover over it. For example, if I hover over the first post by a user, the hover effect activates on the last post retrieved by the mysql query. I have been trying to figure this out for some time now, and am lost as anything. Help would be appreciated.

Answer 1

ID's are unique. You are using the same ID over and over, because of this, the DOM is only finding the last element with that ID -- that's the intended effect, it's a result of how you wrote your php.
<input type='button' id='deletelistenchat'
Remove the ID from this button. You already have the class here.
let's change your hover event.
$(function(){
$('.messagediv').on('mouseover', function() {
$(this).find('.deletelistenchat').css('display', 'block');
}).on('mouseout', function(){
$(this).find('.deletelistenchat').css('display', 'none');
});
});
*Edit*
DOM Behavior wasn't functioning as expected because I didn't clearly look at your markup, that's my fault. Made it jQuery 1.7 worthy, and separated your mouseover and mouseout statements to be able to clearly see them.
The working Fiddle -> http://jsfiddle.net/6MpX9/