toggle only working on first element

I am attempting to toggle() individual table rows. each row gets a serial number and is worked into the id of the row. When the more.png image is clicked the row is shown o开发者_Python百科r hidden. this is only doing it for the first row. what am I missing?

$(function () {
function showdetail()
    {
    var id = $(this).attr('rel');
    $('#'+id).toggle();
    }
    $('#detail').click(showdetail);
});

This is clicked.

echo '<img src="more.png" id="detail" rel="details'.$serial.'" />';

This is shown or hidden.

echo '<tr id="details'.$serial.'"><td>stuff...</td><td>stuff...</td></tr>';

When the page loads, you bind a single function to a single element: the very first occurrence of the element with id="detail". You cannot have more than one element on a page with the same id.

replace this:

echo '<img src="more.png" id="detail" rel="details'.$serial.'" />';

with this:

echo '<img src="more.png" class="detail" rel="details'.$serial.'" />';

Then replace

$('#detail').click(showdetail);

with this:

$('.detail').click(showdetail);

Obviously, this is untested, so let me know if it works...