php Jquery form generated from a foreach - php

Question

I have a foreach that generate data from an sql select. When user click on the div a text message appears "points ganed" and the data inside the form will be submitted.
The entire script works but it always submit the last form on 4 generated... he doesnt target the right form.
There's a way to anchor the right form to submit? thanks in advance to all.
<script>
function(response) {
$('#mydiv').text('Points gained');
$("#form").submit()
}</script>
foreach ($usermeta as $post) {
<form method="post" id="form" action="<?php the_permalink(); ?>">
<div id="mydiv">
click here to earn points.
</div>
<input type="hidden" name="points" id="points" value="<?php echo $post->points; ?>" class="regular-text" />
</form>
}

Answer 1

Every single form has the same id. You need to make sure the id of the form is unique.
I don't have enough rep to comment, but this is what you could do.
<script>
$(document).ready(function() {
$('.mydiv').click(function() {
$(this).text('Points gained').closest('.form').submit();
});
});
</script>
<?php foreach ($usermeta as $post): ?>
<form method="post" class="form" action="<?php the_permalink(); ?>">
<div class="mydiv">
click here to earn points.
</div>
<input type="hidden" name="points" class="points" value="<?php echo $post->points; ?>" class="regular-text" />
</form>
<?php endforeach; ?>

Answer 2

I found a solution like this,
before the foreach i decleare that
$i = 1;
then
<form class="<?php echo $i; ?>">
then at the end of form but before the foreach end tag
$i ++;
so now i have
<form class="1">
<form class="2">
<form class="3">
<form class="4">
and so on, then i put a limit of display element from the sql select putting limit 10.