通过ajax为每个ID提交表单

please guys, have some posts which i outputted from my database and now i want to make a comment form for each post and the form will be submitted through ajax method, but my problem is

1. the ajax method works for only the first outputted post and the form inserts into the database the mysqli_num_rows($query). ie if mysqli_num_rows($query) is =5, the form inserts into 5 rows in the database.
2. the remaining outputted forms reloads the page when the submit button is clicked.

This is what I want to achieve:

1. I want each form to be submitted without reloading.

2. I want the form to be inserted in only one row for each. Here is my code:

   <?php
   
   $con = mysqli_connect('localhost', 'root', '') or die ('error');
   
   mysqli_select_db($con, 'test') or die ('error');
   
   $query = mysqli_query($con, "SELECT * FROM testing");
   while($sql = mysqli_fetch_array($query)){
       $id = $sql['id'];
       $post = $sql['post'];
   
       echo "<p>".$id.". ".$post."<br>";
       $pop_id = $id."pop";    
   ?>
   <style>
   .plop {
       display:none;
       height:200px;
       border-bottom:1px solid #000;
   }
   </style>
       <a href="javascript:;" style="float:right
       ;margin:20px 20px;" onclick="document.getElementById('<?php echo $pop_id; ?>').style.display='block'">comment</a></p><br>
   <div id="<?php echo $pop_id; ?>" class="plop">
   <a href="javascript:;" style="float:right;margin:20px 20px;" onclick="document.getElementById('<?php echo $pop_id; ?>').style.display='none'">close</a>
   <script type="text/javascript" src="jquery.js"></script>
   <form id="my-form">
       <input type="text" id="comment" name="comment" />
       <input type="hidden" id="post" name="post" value="<?php echo $id; ?>" />
       <input type="submit" id="submit" value="post" />
   </form><div id="tutorial"></div>
   <script type="text/javascript">
       $(document).ready(function() {
           $('#my-form').submit(function(e) {
               e.preventDefault();
               $.ajax({
                   method: "GET",
                   url: "dote.php",
                   data: $(this).serialize(),
                   beforeSend: function(){
                       $('#tutorial').html("<img src='progress-dots.gif' />");
                   },
                   success: function(status) {
                       $('#post').val('');
                       $('#tutorial').html("");
                   }
               });
           });
       });
   </script>
   
   </div>
   
   <?php
   
   }
   
   ?>
   

Change the input type="submit" to type="button" and make ajax on click of button. For eg.:

<script type="text/javascript" src="jquery.js"></script>
<form id="my-form">
    <input type="text" id="comment" name="comment" />
    <input type="hidden" id="post" name="post" value="<?php echo $id; ?>" />
    <input type="button" id="submit" value="post" />
</form><div id="tutorial"></div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#submit').click(function(e) {
            e.preventDefault();
            $.ajax({
                method: "GET",
                url: "dote.php",
                data: $("#my-form").serialize(),
                beforeSend: function(){
                    $('#tutorial').html("<img src='progress-dots.gif' />");
                },
                success: function(status) {
                    $('#post').val('');
                    $('#tutorial').html("");
                }
            });
        });
    });
</script>

Above code will post the data without refreshing the page.

try this code

<?php

$con = mysqli_connect('localhost', 'root', '') or die ('error');

mysqli_select_db($con, 'test') or die ('error');

$query = mysqli_query($con, "SELECT * FROM testing");
while($sql = mysqli_fetch_array($query)){
    $id = $sql['id'];
    $post = $sql['post'];

    echo "<p>".$id.". ".$post."<br>";
    $pop_id = $id."pop";    
?>
<style>
.plop {
    display:none;
    height:200px;
    border-bottom:1px solid #000;
}
</style>
    <a href="javascript:;" style="float:right
    ;margin:20px 20px;" onclick="document.getElementById('<?php echo $pop_id; ?>').style.display='block'">comment</a></p><br>
<div id="<?php echo $pop_id; ?>" class="plop">
<a href="javascript:;" style="float:right;margin:20px 20px;" onclick="document.getElementById('<?php echo $pop_id; ?>').style.display='none'">close</a>
<script type="text/javascript" src="jquery.js"></script>
<form id="my-form-"<?php echo $id; ?>>
    <input type="text" id="comment" name="comment" />
    <input type="hidden" id="post" name="post" value="<?php echo $id; ?>" />
    <input type="submit" id="submit" value="post" />
</form><div id="tutorial"></div>
<script type="text/javascript">
    $(document).ready(function() {
        $('#my-form-<?php echo $id; ?>').submit(function(e) {
            e.preventDefault();
            $.ajax({
                method: "GET",
                url: "dote.php",
                data: $(this).serialize(),
                beforeSend: function(){
                    $('#tutorial').html("<img src='progress-dots.gif' />");
                },
                success: function(status) {
                    $('#post').val('');
                    $('#tutorial').html("");
                }
            });
        });
    });
</script>

</div>

<?php

}

?>