How to get rid from the same id in while loop when submitting form using ajax

Question

I am submitting form using ajax in the while loop but because of loop the same form id is using many times , so as a result the form is submitting only once . I think i have to make unique id every time in the loop for the form but don't know how.

Here is my code so far,

<?php
$get_cmt ="SELECT * FROM comments WHERE post_id = $post_id ORDER BY id DESC";
$query_cmt = mysqli_query($db_conx,$get_cmt);
while($row_cmt=mysqli_fetch_array($query_cmt,MYSQLI_ASSOC)){
$comtr_id = $row_cmt['comtr_id'];
$comment_id = $row_cmt['id'];
?>
            <form id="subcmt_smt" method="post">
            <textarea name="subcmt"></textarea>
            <input type="hidden" value="<?php echo $comment_id;?>" name="comment_id">
            <input type="hidden" value="<?php echo $pager_id;?>" name="comtr_id">  
            </form>
<?php } ?>
<script src="jQuery v2.1.1"></script>
<script>
$("#subcmt_smt").submit(function(e) {
            var form = $(this);
            var url = form.attr('action');
            e.preventDefault(); 
             $.ajax({
             type: "POST",
             url: "submit_subcmt.php",
             data: form.serialize(), // serializes the form's elements.
             success: function(data)
            {
             alert(data); // show response from the php script.
            }
        });
      });
 </script>

submit_subcmt.php

<?php
$comtr_id =$_POST['comtr_id'];
$comment_id =$_POST['comment_id'];
echo $comtr_id;
echo $comment_id;
?>

Answer 1

To illustrate the comment I made above you could try something similar to this perhaps.

<?php

    $get_cmt ="SELECT * FROM comments WHERE post_id = $post_id ORDER BY id DESC";
    $query_cmt = mysqli_query($db_conx,$get_cmt);

    while( $row_cmt=mysqli_fetch_array($query_cmt,MYSQLI_ASSOC) ){
        $comtr_id = $row_cmt['comtr_id'];
        $comment_id = $row_cmt['id'];

?>              <!-- use a class attribute here -->
                <form class="subcmt_smt" method="post">
                    <textarea name="subcmt"></textarea>
                    <input type="hidden" value="<?php echo $comment_id;?>" name="comment_id">
                    <input type="hidden" value="<?php echo $pager_id;?>" name="comtr_id">  
                </form>
<?php 
    }//end loop
?>


<script src="jQuery v2.1.1"></script>
<script>
    /* and assign event handlers to form objects with this class as per above */
    $("form.subcmt_smt").submit(function(e) {
        var form = $(this);
        var url = form.attr('action');
        e.preventDefault(); 
        $.ajax({
            type: "POST",
            url: "submit_subcmt.php",
            data: form.serialize(),
            success: function(data) {
                alert(data);
            }
        });
    });
</script>

Answer 2

Try this.

 <?php
   $get_cmt ="SELECT * FROM comments WHERE post_id = $post_id ORDER BY id DESC";
   $query_cmt = mysqli_query($db_conx,$get_cmt);
   while($row_cmt=mysqli_fetch_array($query_cmt,MYSQLI_ASSOC)){
   $comtr_id = $row_cmt['comtr_id'];
   $comment_id = $row_cmt['id'];
 ?>
        <form class="subcmt_smt" method="post">
        <textarea name="subcmt"></textarea>
        <input type="hidden" value="<?php echo $comment_id;?>" name="comment_id">
        <input type="hidden" value="<?php echo $pager_id;?>" name="comtr_id">  
        </form>
   <?php } ?>
   <script src="jQuery v2.1.1"></script>
    <script>
   $(".subcmt_smt").submit(function(e) {
        var form = $(this);
        var url = form.attr('action');
        e.preventDefault(); 
         $.ajax({
         type: "POST",
         url: "submit_subcmt.php",
         data: form.serialize(), // serializes the form's elements.
         success: function(data)
        {
         alert(data); // show response from the php script.
        }
    });
   });
 </script>