How to select the correct id for the specific button pressed in dynamic table

I'm relatively new to jquery and cannot for the life of me get this to return the proper youtube id it just always returns the first one in the table.

php. I load the youtube id from my database then display it in the table.

require_once 'library/Zend/Loader.php';
Zend_Loader::loadClass('Zend_Gdata_YouTube');
echo '<br/>';
echo '<table width="95%" cellpadding="0" cellspacing="0" align="center" border="0">'; 

while ($row = mysqli_fetch_assoc($videoquery))
{
$vidid = ($row['id']);
$vidtitle = ($row['title']);
$vidip = ($row['ip']);
$page2 = ($row['page']);
$q = ($row['youtubeid']);

$yt = new Zend_Gdata_YouTube();
$yt->setMajorProtocolVersion(2);
$videoEntry = $yt->getVideoEntry($q);
$thumbnail = '<img src="' . $videoEntry->mediaGroup->thumbnail[0]->url . '" width="100" height="92"';

echo '<tr bgcolor="#333">
 <td width="100px" rowspan="2" nowrap="nowrap" style="border:2px solid #999999">'.$thumbnail.'</td>
 <td colspan="2" align="left">' .$vidtitle. '
 </td></tr>
 <tr bgcolor="#3B3B3B"><td nowrap="nowrap">
 <form method="post">
 <input name="parse" type="hidden" value="playvid" /><input name="youtubeid" id="youtubeid" type="hidden" value="'.$q.'" />;
 <input type="button" nam开发者_如何学编程e="play" id="play" value="Play Video" />
 </form></td>
 <td align="right">
 <form method="post" action="">
 <input type="hidden" name="page2" value="'.$_SERVER['REQUEST_URI'].'">
 <input name="parse" type="hidden" value="deletepost2" />
 <input name="postid2" type="hidden" value="'.$vidid.'"/>';
if ($topuserid == $_GET['id']){
 echo '<input type="submit" name="deletepost2" id="deletepost2" value="Delete Video" /';>
}  
echo  '</form></td></tr>';  
}  
echo   '</table>';  
}

Jquery code

<script type="text/javascript">
$(document).ready(function(){
$('#play').live('click', function() {
$('#video').empty()
var vidid = $('#youtubeid').val(); 
alert(vidid);
var playvid = '<object width="300" height="193">'+
'<param name="movie" value="http://www.youtube.com/v/'+vidid+'&amp;hl=en_US&amp;fs=1"></param>'+
'<param name="allowFullScreen" value="true"></param>'+
'<param name="allowscriptaccess" value="always"></param>'+
'<embed src="http://www.youtube.com/v/'+vidid+'&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="193"></embed>'+
'</object>';
$('#video').append(playvid);    });
});
</script>

Nathan had the right idea but had some errors in his code. Try this:

<script type="text/javascript">
$(document).ready(function(){
  $('#play').live('click', function() {
    var tr = $(this).closest('tr');
    tr.find('#video').empty();
    var vidid = tr.find('#youtubeid').val(); 
    alert(vidid);
  });
});
</script>

you need to give your selector some context. implementing no changes in your html you could change your js to

$(document).ready(function(){
var $tr = $(this).closest('tr')
$('#play').live('click', function() {
tr.find('#video').empty()
var vidid = tr.find('#youtubeid').val(); 
alert(vidid);
var playvid = '<object width="300" height="193">'+
'<param name="movie" value="http://www.youtube.com/v/'+vidid+'&amp;hl=en_US&amp;fs=1"></param>'+
'<param name="allowFullScreen" value="true"></param>'+
'<param name="allowscriptaccess" value="always"></param>'+
'<embed src="http://www.youtube.com/v/'+vidid+'&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="193"></embed>'+
'</object>';
tr.find('#video').append(playvid);    });
});