複数のフォームがJqueryのチェックボックスで送信されます

Question

ページに複数のフォームがあります（mysqlデータで設定されているので、1つでも100でもかまいません）、各フォームはユーザーがそのチェックボックスをクリックするとチェックボックスの値を送信します。私はJqueryでこれをやっているので、チェックボックスは消え、ページをリロードせずに特定のIDのUPDATEを送信します。

問題は、最初のチェックボックスをクリックするとチェックボックスが消えてDB（正常）が更新されますが、ユーザーが2番目のチェックボックスをクリックすると、1番目のチェックボックスがDBで更新され、

私はコンテナを移動しようとしましたが（チェックボックスは隠されているのでZ-インデックスの問題だと思っていました）、divを隠さなくてもユーザーがページを更新するまで更新されます。

初期スクリプト

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
function SubmitFormData() { 
    var feedBackCheckbox = $("#feedBackCheckbox").val(); 
    var feedBackID = $("#feedBackID").val(); 
    $.post("submit.php", { feedBackCheckbox: feedBackCheckbox, feedBackID : feedBackID }, 
    function(data) { 
    $('#results').html(data); 
    $('#myForm')[0].reset(); 
    }); 
} 
function SubmitFormData2() { 
    var feedBackCheckbox = $("#feedBackCheckbox2").val(); 
    var feedBackID = $("#feedBackID").val(); 
    $.post("submit.php", { feedBackCheckbox: feedBackCheckbox, feedBackID : feedBackID }, 
    function(data) { 
    $('#results').html(data); 
    $('#myForm')[0].reset(); 
    }); 
} 
function SubmitFormData3() { 
    var feedBackCheckbox = $("#feedBackCheckbox3").val(); 
    var feedBackID = $("#feedBackID").val(); 
    $.post("submit.php", { feedBackCheckbox: feedBackCheckbox, feedBackID : feedBackID }, 
    function(data) { 
    $('#results').html(data); 
    $('#myForm')[0].reset(); 
    }); 
} 
</script> 

フォーム

<form id="myForm" method="post"> 
    <input type = "hidden" value = "1" name = "feedBackID" id = "feedBackID"> 
    <input id = "feedBackCheckbox" name="feedBackCheckbox" type="checkbox" value = "1" onclick="SubmitFormData();" /><br/>I Like It<br/> 
    <input id = "feedBackCheckbox2" name="feedBackCheckbox" type="checkbox" value = "2" onclick="SubmitFormData2();" /><br/>I Don't Like It<br/> 
    <input id = "feedBackCheckbox3" name="feedBackCheckbox" type="checkbox" value = "3" onclick="SubmitFormData3();" /><br/>I Like It but Don't Sent It for Now<br/> 
    </form> 
    <form id="myForm" method="post"> 
    <input type = "hidden" value = "2" name = "feedBackID" id = "feedBackID2"> 
    <input id = "feedBackCheckbox" name="feedBackCheckbox" type="checkbox" value = "1" onclick="SubmitFormData();" /><br/>I Like It<br/> 
    <input id = "feedBackCheckbox2" name="feedBackCheckbox" type="checkbox" value = "2" onclick="SubmitFormData2();" /><br/>I Don't Like It<br/> 
    <input id = "feedBackCheckbox3" name="feedBackCheckbox" type="checkbox" value = "3" onclick="SubmitFormData3();" /><br/>I Like It but Don't Sent It for Now<br/> 
    </form> 
    <form id="myForm" method="post"> 
    <input type = "hidden" value = "3" name = "feedBackID" id = "feedBackID3"> 
    <input id = "feedBackCheckbox" name="feedBackCheckbox" type="checkbox" value = "1" onclick="SubmitFormData();" /><br/>I Like It<br/> 
    <input id = "feedBackCheckbox2" name="feedBackCheckbox" type="checkbox" value = "2" onclick="SubmitFormData2();" /><br/>I Don't Like It<br/> 
    <input id = "feedBackCheckbox3" name="feedBackCheckbox" type="checkbox" value = "3" onclick="SubmitFormData3();" /><br/>I Like It but Don't Sent It for Now<br/> 
    </form> 
    <br/> 
    Update Display..... <br /> 
    ==============================<br /> 
    <div id="results"> 
    <!-- All data will display here --> 
    </div> 

更新ファイル

<?php 
    echo $feedBackID = $_POST['feedBackID']; 
    echo $feedBackCheckbox = $_POST['feedBackCheckbox'] ."<br />"; 
    echo "==============================<br />"; 
    echo "All Data Submitted Successfully!"; 
?> 


<?php 
include ('config.php'); 

// Create connection 
$conn = new mysqli($servername, $username, $password, $dbname); 
// Check connection 
if ($conn->connect_error) { 
    die("Connection failed: " . $conn->connect_error); 
} 

$sql = "UPDATE user_order_item_feedback SET feedback_value = '$feedBackCheckbox' WHERE id = $feedBackID"; 

if ($conn->query($sql) === TRUE) { 
    echo "New record created successfully"; 
} else { 
    echo "Error: " . $sql . "<br>" . $conn->error; 
} 

$conn->close(); 
?> 

Answer 1

実際、私はそれが理由であるかどうかはわかりませんが、それは確かに問題です。

HTMLに同じIDを持つ複数の要素を持つべきではありません。

これは、ほとんどの場合、このIDを持つ最初の項目のみを考慮します。