PHP AJAX submit form with while loop

Question

I am making a live comment function. Here the problem is that when I am commenting the comment is successful but the data gets inserted as many times the form is present in the while loop. I think I should assign a separate status id (sts_id) to each form from table status and make changes in my ajax code so that it submits data only once rather than submitting as many times as the form is created in while loop. For example, since the form is in while loop and there are 6 status posts then when I comment on a status the comment gets inserted 6 times. Also one more problem is there i.e., commenting function is currently working only on the 1st form inside the while loop. On other forms, the form submission is not working i.e., its not submitting the comments. I think adding separate ids might solved this too. Please help.

HTML part

<script>
       function ajaxFunction(){
  var ajaxRequest; 
  try{
      ajaxRequest = new XMLHttpRequest();
  }catch (e){
      try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
        try{
           ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }catch (e){
           // Something went wrong
           alert("Your browser broke!");
           return false;
        }
      }
  }
  $('.commentarea').keydown(function(event) {
    var id = $(this).attr('id');
    var status_id = id.replace("postcomment_", "");
    if($.trim($("#postcomment_"+status_id).val())) {
      if(event.keyCode == 13) {
        event.preventDefault();
        $("form#form_id_"+status_id).on('submit', function (e) {
          e.preventDefault();
          var comment = $('#postcomment_'+status_id).val();
          var statsid = status_id;
          var myData = {"comment": comment, "statsid": statsid};
          $.ajax({
            url: "post-comment.php",
            type: "POST",
            data: myData,
            success: function (data, status, xhr) {
              $(".showbox").html(data); // output result
              $('#postcomment').val('');
            }
          });
        });
      }
    }
  });
}
</script>

    <div class="stats-cont">
<?php 
$get_sts = "SELECT * FROM status LEFT JOIN members ON status.sts_mem = members.mem_id ORDER BY sts_time DESC";

$get_stq = $pdo->prepare($get_sts);
$get_stq->execute();

while($get_stf = $get_stq->fetch()){ extract($get_stf); 

$get_cmts = "SELECT * FROM comments WHERE cmt_status = :status ORDER BY cmt_id ASC";
$get_cmtq = $pdo->prepare($get_cmts);
$get_cmtq->bindValue(':status', $sts_id);
$get_cmtq->execute();
$total_cmts = $get_cmtq->rowCount();
?>
<div class="status-note-block status-container">
  <div class="member-name-container">
    <div class="mem-img-thumb">
      <?php if($mem_image == null){ ?>
      <img src="images/user.png" height="40" width="40">
      <?php }else{ ?>
      <img src="users/<?php echo $mem_image; ?>" height="40" width="40">
      <?php } ?>
    </div>
    <div class="member-name"><?php echo $mem_name; ?><br>
      <small>
      <?php if((date("Y-m-d", strtotime($sts_time))) == $curr_date){ echo "Today"; }else if((date("Y-m-d", strtotime($sts_time))) == $yest){ echo "Yesterday"; }else{ echo date("jS F", strtotime($sts_time)); } ?>
      <?php echo date("h:i a", strtotime($sts_time)); ?> </small> </div>
  </div>
  <div class="status-block"><?php echo $sts_status; ?></div>
</div>
<div class="comment-block">
  <div class="comment-reaction-holder"></div>
  <?php while($fetch_cmts = $get_cmtq->fetch()){ extract($fetch_cmts); ?>
  <div class="comment-flex-holder">
    <div class="comment-img-thumb">
      <?php if($mem_image == null){ ?>
      <img src="images/user.png" height="30" width="30">
      <?php }else{ ?>
      <img src="users/<?php echo $mem_image; ?>" height="30" width="30">
      <?php } ?>
    </div>
    <div class="showbox"><font color="#5B5899" style="font-size: 12px"><b><?php echo $mem_name; ?></b></font> <?php echo $cmt_comment; ?><br />
      <font style="font-size:12px">Like &middot; Reply &middot; Just now</font></div>
  </div>
  <br />
  <?php } ?>
    <div id="showbox"></div>
  <div class="commet-field-holder">
    <div class="comment-img-thumb">
      <?php if($mem_image == null){ ?>
      <img src="images/user.png" height="30" width="30">
      <?php }else{ ?>
      <img src="users/<?php echo $mem_image; ?>" height="30" width="30">
      <?php } ?>
    </div>
    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="full-width cmtform" id="form_id_<?php echo $sts_id?>">
      <input type="hidden" name="status_id" value="<?php echo $sts_id; ?>" id="statsid_<?php echo $sts_id?>" />
      <textarea name="comment" placeholder="Give a comment..." class="comment-field commentarea" id="postcomment_<?php echo $sts_id?>" onclick='ajaxFunction()'></textarea>
    </form>
  </div>
</div>
<?php } ?>

post-comment.php part:

    <?php
//error_reporting(0);
include('config/db.php');
$time = date('Y-m-d H:i:s');

$content   = (!empty($_POST['comment']))?$_POST['comment']:null;
$status_id = (!empty($_POST['statsid']))?$_POST['statsid']:null;

$insert = "INSERT INTO `comments`(`cmt_comment`,`cmt_status`, `cmt_time`)VALUES(:comment, :status, :time)";
$inserq = $pdo->prepare($insert);
$inserq->bindValue(':comment', $content);
$inserq->bindValue(':status', $status_id);
$inserq->bindValue(':time', $time);
$inserq->execute();
$lastid = $pdo->lastInsertId();

$sel = "SELECT * FROM comments 
        LEFT JOIN status ON comments.cmt_status = status.sts_id 
        LEFT JOIN members ON members.mem_id = status.sts_mem
        WHERE comments.cmt_id = :lastid";
$seq = $pdo->prepare($sel);
$seq->bindValue(':lastid', $lastid);
$seq->execute();
$sef = $seq->fetch();
?>

<div class="comment-flex-holder">
  <div class="comment-img-thumb">
    <?php if($sef['mem_image'] == null){ ?>
    <img src="images/user.png" height="30" width="30">
    <?php }else{ ?>
    <img src="users/<?php echo $sef['mem_image']; ?>" height="30" width="30">
    <?php } ?>
  </div>
  <div class="showbox"><font color="#5B5899" style="font-size: 12px"><b><?php echo $sef['mem_name']; ?></b></font> <?php echo $sef['cmt_comment']; ?><br />
    <font style="font-size:12px">Like &middot; Reply &middot; Just now</font></div>
</div>
<br />

Answer 1

Since, While Loop having n numbers of form. So, each form & input values will have different IDs. In your question, same ID is declared to each and every input. So, Multiple IDs with same name are not allowed. ID can't be same.

First, you need to change each and every input ID. More simple way, Append Status ID to each ID. It will automatically get changed.

If you want to use this answer, then you need to copy my answer as it is. Rather than, modifying in your code. Because, You may leave few lines and later on outcome will come as "Not Working". So, Try this Code. If any problem, Feel free to ask.

Updated Code

<script>
function ajaxFunction(){
  var ajaxRequest; 
  try{
      ajaxRequest = new XMLHttpRequest();
  }catch (e){
      try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
        try{
           ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }catch (e){
           // Something went wrong
           alert("Your browser broke!");
           return false;
        }
      }
  }
  $('.commentarea').keydown(function(event) {
    var id = $(this).attr('id');
    var status_id = id.replace("postcomment_", "");
    if ($.trim($("#postcomment_"+status_id).val())) {
      if (event.keyCode == 13) {
        event.preventDefault();
        $("form#form_id_"+status_id).on('submit', function (e) {
          e.preventDefault();
          var comment = $('#postcomment_'+status_id).val();
          var statsid = status_id;
          var myData = {"comment": comment, "statsid": statsid};
          $.ajax({
            url: "post-comment.php",
            type: "POST",
            data: myData,
            success: function (data, status, xhr) {
              $(".showbox").html(data); // output result
              $('#postcomment').val();
            }
          });
        });
      }
    }
  });
}
</script>

<div class="stats-cont">
<?php 
$get_sts = "SELECT * FROM status LEFT JOIN members ON status.sts_mem = members.mem_id ORDER BY sts_time DESC";

$get_stq = $pdo->prepare($get_sts);
$get_stq->execute();

while($get_stf = $get_stq->fetch()){ extract($get_stf); 

$get_cmts = "SELECT * FROM comments WHERE cmt_status = :status ORDER BY cmt_id ASC";
$get_cmtq = $pdo->prepare($get_cmts);
$get_cmtq->bindValue(':status', $sts_id);
$get_cmtq->execute();
$total_cmts = $get_cmtq->rowCount();
$fetch_cmts = $get_cmtq->fetch();
?>
<div class="status-note-block status-container">
  <div class="member-name-container">
    <div class="mem-img-thumb">
      <?php if($mem_image == null){ ?>
      <img src="images/user.png" height="40" width="40">
      <?php }else{ ?>
      <img src="users/<?php echo $mem_image; ?>" height="40" width="40">
      <?php } ?>
    </div>
    <div class="member-name"><?php echo $mem_name; ?><br>
      <small>
      <?php if((date("Y-m-d", strtotime($sts_time))) == $curr_date){ echo "Today"; }else if((date("Y-m-d", strtotime($sts_time))) == $yest){ echo "Yesterday"; }else{ echo date("jS F", strtotime($sts_time)); } ?>
      <?php echo date("h:i a", strtotime($sts_time)); ?> </small> </div>
  </div>
  <div class="status-block"><?php echo $sts_status; ?></div>
</div>
<div class="comment-block">
  <div class="comment-reaction-holder"></div>
  <div class="commet-field-holder">
    <div class="comment-img-thumb">
      <?php if($mem_image == null){ ?>
      <img src="images/user.png" height="30" width="30">
      <?php }else{ ?>
      <img src="users/<?php echo $mem_image; ?>" height="30" width="30">
      <?php } ?>
    </div>
    <div class="showbox"></div>
    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="full-width cmtform" id="form_id_<?=$sts_id?>">
      <input type="hidden" name="status_id" value="<?php echo $sts_id; ?>" id="statsid_<?=$sts_id?>" />
      <textarea name="comment" placeholder="Give a comment..." class="comment-field commentarea" id="postcomment_<?=$sts_id?>" onclick='ajaxFunction()'></textarea>
    </form>
  </div>
</div>
<?php } ?>

Edit 1

<script>
    function ajaxFunction(){
      var ajaxRequest; 
      try{
          ajaxRequest = new XMLHttpRequest();
      }catch (e){
          try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
          }catch (e) {
            try{
               ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }catch (e){
               // Something went wrong
               alert("Your browser broke!");
               return false;
            }
          }
      }
      $('.commentarea').keydown(function(event) {
              var id = $(this).attr('id');
              var status_id = id.replace("postcomment_", "");
              if ($.trim($("#postcomment_"+status_id).val())) {
                if (event.keyCode == 13) {
                        event.preventDefault();
                        postcomment(status_id);
                }
              }
            });
            function postcomment(status_id){
                var comment = $('#postcomment_'+status_id).val();
                    var statsid = status_id;
                    var myData = {"comment": comment, "statsid": statsid};
                    $.ajax({
                        url: "post-comment.php",
                        type: "POST",
                        data: myData,
                        success: function (data, status, xhr) {
                            $(".showbox").html(data); // output result
                            $('#postcomment').val();
                        }
                    });
            }
    }
    </script>

Answer 2

to maintain uniqueness in comment box you should use counter. that will create dynamic name and id. same you need to fetch in ajax call $(this).attr('data-counter')

you can check below code and set according to your need.

<script>
    function ajaxFunction(){
        var ajaxRequest; 
        try{
            ajaxRequest = new XMLHttpRequest();
        }catch (e){
            try{
              ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            }catch (e) {
              try{
                 ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
              }catch (e){
                 // Something went wrong
                 alert("Your browser broke!");
                 return false;
              }
            }
        } 
    $('.postcomment').keydown(function(event) {
        if($.trim($(".postcomment").val())) {
            if(event.keyCode == 13) {
                event.preventDefault();
                $("form.cmtform").submit();
            }
        }   
    });
    $("form.cmtform").on('submit', function(e) {
        e.preventDefault();
        var counter_val = $(this).attr('data-counter');
        var comment = $('#postcomment_' + counter_val).val(); 
        var statsid = $('#statsid_' + counter_val).val(); 
        var myData={"comment":comment, "statsid":statsid};
        $.ajax({
            url : "post-comment.php",
            type: "POST",
            data : myData,
            success: function(data,status,xhr){
                $(".showbox").html(data); // output result
                $('#postcomment_' + counter_val).val();
            }
        }); 
    }); 
    }
</script>

<div class="stats-cont">
<?php 
    $get_sts = "SELECT * FROM status LEFT JOIN members ON status.sts_mem = members.mem_id ORDER BY sts_time DESC";

$get_stq = $pdo->prepare($get_sts);
$get_stq->execute();
    $counter = 1;
    while($get_stf = $get_stq->fetch()){ extract($get_stf); 

    $get_cmts = "SELECT * FROM comments WHERE cmt_status = :status ORDER BY cmt_id ASC";
    $get_cmtq = $pdo->prepare($get_cmts);
    $get_cmtq->bindValue(':status', $sts_id);
    $get_cmtq->execute();
    $total_cmts = $get_cmtq->rowCount();
    $fetch_cmts = $get_cmtq->fetch();
?>
<div class="status-note-block status-container">
  <div class="member-name-container">
    <div class="mem-img-thumb">
      <?php if($mem_image == null){ ?>
      <img src="images/user.png" height="40" width="40">
      <?php }else{ ?>
      <img src="users/<?php echo $mem_image; ?>" height="40" width="40">
      <?php } ?>
    </div>
    <div class="member-name"><?php echo $mem_name; ?><br>
      <small>
      <?php if((date("Y-m-d", strtotime($sts_time))) == $curr_date){ echo "Today"; }else if((date("Y-m-d", strtotime($sts_time))) == $yest){ echo "Yesterday"; }else{ echo date("jS F", strtotime($sts_time)); } ?>
      <?php echo date("h:i a", strtotime($sts_time)); ?> </small> </div>
  </div>
  <div class="status-block"><?php echo $sts_status; ?></div>
</div>
<div class="comment-block">
  <div class="comment-reaction-holder"></div>
  <div class="commet-field-holder">
    <div class="comment-img-thumb">
      <?php if($mem_image == null){ ?>
      <img src="images/user.png" height="30" width="30">
      <?php }else{ ?>
      <img src="users/<?php echo $mem_image; ?>" height="30" width="30">
      <?php } ?>
    </div>
    <div class="showbox"></div>
    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="full-width cmtform" data-counter="<?php echo $counter;?>">
       <input type="hidden" name="status_id_<?php echo $counter;?>" value="<?php echo $sts_id; ?>" id="statsid_<?php echo $counter;?>" />
      <textarea name="comment_<?php echo $counter;?>" placeholder="Give a comment..." class="postcomment comment-field commentarea" id="postcomment_<?php echo $counter;?>" onclick='ajaxFunction()'></textarea>
     </form>
  </div>
</div>
    <?php 
    $counter++;
} 
?>

Cheers !!