複数の便利なボタンが同じページにあります

Question

jQueryで「便利なボタン」を作っています。質問の回答（stackoverflow上のupvote関数のように）。

function submitForm() { 
 
\t var form = document.myform; 
 
\t var dataString = $(form).serialize(); 
 
\t 
 
\t $.ajax({ 
 
\t \t type:'POST', 
 
    url:'like_submit.php', 
 
    data: dataString, 
 
    success: function(data){ 
 
    \t $('#myResponse').html(data); 
 
    \t $('#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"> 
 
\t 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>

like_submit.phpはこのようなものです：それは働く1つの答えのためにそう

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

。

しかし、今では複数の回答を追加したいと思いますが、このケースでスクリプトがどのように機能するのかわかりません。

私は2番目のフォーム...

<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> 

を追加した場合...私は2つの問題を抱えています。私は最後のPOSTデータを取得するだけです。私が最初のフォームをクリックすると、それは言う： ありがとう！役に立った？オン|応答ID：2

第2の問題は、応答メッセージが常に最初の位置に表示されることです。

誰でも手助けできますか？どうもありがとう！

Answer 1

提出フォーム

HTMLに対する要素取得：私は使用してについて警告したい

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) { 
 
\t var form = $(el).closest('form'); 
 
\t var dataString = form.serialize(); 
 
    \t form.next('#myResponse').html(dataString); 
 
    \t 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"> 
 
\t 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>