ajax multiple,jquery - AJAX multiple form post - Stack Overflow

I have a basic AJAX form submission function in the head of my page (stolen from a tutorial because I can't write this stuff from scratch). In the body of my page I have a bunch of forms with hidden inputs that have values corresponding to user id's that are in my database.

The idea is that when you submit a form, the hidden value is POST'd to my PHP page where it deletes the user with that id from my MySQL database. It's all pretty straight forward and there's probably a much more efficient way to do it but this is the only way I could think of.

Anyway the problem is my AJAX function only works with the first form in my page. When I submit the form, the user is deleted from my database, the page refreshes and that particular form disappears. But if you click any form beneath the top one, nothing happens. Here's my jQuery function:

$(document).ready(function(){

$("#myform").validate({

debug: false,

rules: {

group: {required: true},

},

messages: {

group: {required: " Field required.", loginRegex: " Invalid character."},

},

submitHandler: function(form) {

$.post('process_delete_participant.php', $("#myform").serialize(), function(data) {

$('#results').html(data);

});

}

});

});

And here's what's in the body of my page:

$query = mysql_query('SELECT * FROM `Participant`');

if (!$query)

{

die('Query failure: '.mysql_error());

}

while($rows = mysql_fetch_array($query))

{

$fname = $rows['firstName'];

$sname = $rows['secondName'];

$id = $rows['idParticipant'];

echo "

echo "";

echo "$fname ";

echo "$sname ";

echo " ";

echo "

echo "
";

}

?>

So an example of one of the forms could look something like this:

John Smith

I can think of a couple of reasons why the function only works with the topmost form but I have no idea what to edit in the syntax of my function to solve the issue. Anyone know?