同一页面上的多个有用按钮

Question

I've made a "Useful-Button" with jQuery so user can rate e.g. an answer of a question (like the upvote function here on stackoverflow).

function submitForm() {
    var form = document.myform;
    var dataString = $(form).serialize();
    
    $.ajax({
        type:'POST',
    url:'like_submit.php',
    data: dataString,
    success: function(data){
        $('#myResponse').html(data);
        $('#myResponse').fadeIn().delay(3000).fadeOut();
    }
   });
   return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" class="myform" method="post" name="myform">
    Was this 1. answer helpful?
  <input type="hidden" name="answer_id" value="1" />
  <input  class="label__checkbox" type="checkbox" name="helpful" onclick="submitForm()" />
</form>
<div id="myResponse"></div>

The like_submit.php is like this:

<?php
$helpful = $_POST['helpful'];
$answer_id = $_POST['answer_id'];
echo "Thank you! Helpful? $helpful | AnswerID: $answer_id";
?>

So for one answer it works.

But now I want to add more than one answer and I doesn't know how get the script to work for this case.

If I add a second form...

<form id="myform" class="myform" method="post" name="myform">
Was this 2. answer helpful?
  <input type="hidden" name="answer_id" value="2" />
  <input  class="label__checkbox" type="checkbox" name="helpful" onclick="submitForm()" />
</form>
<div id="myResponse"></div>

... I have two problems. I only get the last POST-data right. If I click the first form, it says: Thank you! Helpful? on | AnswerID: 2

Second problem, the response message appears allways an the first position.

Can anyone help? Many thanks!

</div>

Answer 1

Get the elements relative to the submitted form

html: onclick="submitForm(this)"

js:

function submitForm(el) {
    var form = $(el).closest('form');
    var dataString = form.serialize();

    $.ajax({
        type:'POST',
    url:'like_submit.php',
    data: dataString,
    success: function(data){
        form.next('#myResponse').html(data);
        form.next('#myResponse').fadeIn().delay(3000).fadeOut();
    }
   });
   return false;
}

function submitForm(el) {
    var form = $(el).closest('form');
    var dataString = form.serialize();
        form.next('#myResponse').html(dataString);
        form.next('#myResponse').fadeIn().delay(3000).fadeOut();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" class="myform" method="post" name="myform">
    Was this 1. answer helpful?
  <input type="hidden" name="answer_id" value="1" />
  <input  class="label__checkbox" type="checkbox" name="helpful" onclick="submitForm(this)" />
</form>
<div id="myResponse"></div>
<form id="myform" class="myform" method="post" name="myform">
Was this 2. answer helpful?
  <input type="hidden" name="answer_id" value="2" />
  <input  class="label__checkbox" type="checkbox" name="helpful" onclick="submitForm(this)" />
</form>
<div id="myResponse"></div>

</div>