Trying to post comments to "posts" fetched from the database but it is only posting comment to only one post

Question

I have a table for the posts in my database and the other table for comments, what I am trying to do is I am fetching all my posts from the database and with every post, I have given a form to submit comments. when i am trying to post comments using this form with ajax it works for only one post and not for others.(here I would like to mention that since this form is being populated automatically with each post, its text area is having the same ID, probably that could be causing error) but I can't figure out, how to fix this? any help or suggestion would be highly appreciated.

(Note: I am not an expert but a learner only.)

here is my code :

    <?php
echo '<div class="'.$row['post_id'].'">';            

$connect = mysqli_connect("localhost", "root", "", "testing") or die("<p><span style=\"color: red;\">Unable to select database</span></p>");

$post_id = $row['post_id'];

$resultt = mysqli_query($connect,"SELECT * FROM tbl_comment WHERE parent_comment_id = '0' AND post_id = '$post_id' ORDER BY comment_id DESC ");
while($rowss = mysqli_fetch_array($resultt, MYSQLI_BOTH))
{
if ($rowss>0){
echo '
 <div>
  <div>'.$rowss["comment"].'</div>
  <div style="font-size: 12px; font-family: serif;">By <b>'.$rowss["comment_sender_name"].'</b> on '.$rowss["date"].'</div>
  <div align="right" style="margin-bottom: 19px;"><a href="#" class="reply" id="'.$rowss["comment_id"].'">Reply</a></div>
 </div>
 ';
} else { echo ''; } }

echo '</div>
<form method="POST" class="comment_form">
<div class="form-group"><textarea name="comment_content" class="form-control comment_content" post_id ="'.$row['post_id'].'" placeholder="Enter Comment" rows="2"></textarea></div>
    <div class="form-group">
     <input type="submit" name="submit" class="btn btn-info" value="Publish" onClick="adcomnt()" />
    </div>
   </form>

 <script>

                    function adcomnt() {
                    var post_id = $(".comment_content").attr("post_id");
                    var comment_name = '.$_SESSION['username'].';   
                    var comment_content = $(".comment_content").val();
                    var comment_id = 0;

                    $.ajax({
                        type: "POST",
                        url: "add_comment.php",
                        dataType: "json",
                        data: "post_id=" +post_id+ "&comment_content=" + comment_content+ "&comment_id=" + comment_id+ "&comment_name=" + comment_name, 
                        success: function(data) {
                if(data.status == "error"){
                alert("Oops, Comment not inserted!");
                } 
                else if(data.status == "success"){
                alert("Thank you! comment inserted!");


                }},
                    });


}

</script>

            </div>';
            ?>

Answer 1

The problem was fixed, by making a few changes as it was a form inside loop supplied each element a unique ID :

here is the updated code :

    <form method="POST" class="comment_form" id="f'.$post_id.'">
        <div class="form-group"><textarea name="comment_content" class="form-control comment_content" id="content_'.$post_id.'" placeholder="Enter Comment" rows="2"></textarea></div>
            <div class="form-group">
              <input type="submit" id="submit_comment'.$post_id.'" post_id="'.$post_id.'" name="submit" class="btn btn-info" value="Publish" />
            </div></form>

<script>
       $(document).ready(function(){
        $( "#submit_comment'.$post_id.'" ).click(function(e) { 
        e.preventDefault()

Now it is working as it was supposed.