Как добавить данные в конкретный div в цикле PHP while

У меня есть система комментариев, в которой я добавляю комментарии, которые делает пользователь, но когда я добавляю данные, получается: [object HTMLCollection]: [object HTMLCollection] и я также хочу знать, как добавить этот комментарий к тому конкретному сообщению, в котором прокомментировал пользователь.

Мой код php:

$query =  "SELECT ph.ext, ph.likes,ph.desccription, ph.image_url,ph.email,ph.username,ph.uid ,ph.id,ph.avatar_path
          FROM photos as ph
          inner join followers as fol
          on fol.user_id = ph.uid
          where fol.uid = '$id'
          ORDER BY ph.image_url DESC limit 5";
$fire = mysqli_query($con,$query) or die("can not fetch data from database ".mysqli_error($con));
if (mysqli_num_rows($fire)>0) {



  while ($users = mysqli_fetch_assoc($fire)) {
    $likes = $users['likes'];
    $description = $users['desccription'];
    $username = $users['username'];
    $uid = $users['uid']; 
    $pixid = $users['id'];
    $avatar_path5 = $users['avatar_path'];


    ?>


<div class = "all" >
<div class = "card" >
  <div class = "float" >
  <div class = "avatar" >
    <img src = "<?php echo $avatar_path5; ?>" width = "100%" class = "avatar">
  </div>

      <div class = "username" style = "font-weight: 600; size: 14px;  text-decoration: none; color: black !important; ">
      <p style = "color: black !important;"><?php echo "<div><a href='users?id = ".$users['uid']."' style='color: black !important; '>
               <h3>".$users['username']."</h3>

      </div></a>"; ?></p>
</div>
</div>
   <?php
   if ($users['ext']=='mp4') {
     ?>
     <video class = "videos"  controlsList = "nofullscreen nodownload" style = "width: 100%; height:100%;" controls autoplay = "true" muted> 
 <source src = "<?php echo $users['image_url']?>" type = "video/mp4">

          </video>  

<?php
}else{
  ?>
  <img src = "<?php echo $users['image_url']?>" alt = "Avatar" style = "width:100%;">
  <?php }
  ?>

             <form method = "POST"  action = "" >
                <div class = "commentdiv">
                  <input type = "hidden" name = "id" id = "id" class = "id" value = "<?php echo $pixid;?>">
                  <input type = "hidden" name = "username" id = "username"  value = "<?php echo $activeusername;?>">
                  <input type = "hidden" name = "uid" id = "uid"  value = "<?php echo $id3;?>">
          <textarea style = ""  name = "comment" id = "comment" class = "comment"  placeholder = "  comment here"></textarea>
         <button type = "button" style = "background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    color: #3897f0; font-weight:600;" class = "submit" id = "button_id">comment</button>

       </div>

          </form>
        </div>
         <div id = "comments" class = "comments"  data-post-id = "<?php echo $pixid;?>">
            <?php



$sql = "SELECT * FROM comment where post_id='$pixid' order by time2 desc limit 3";
$results = mysqli_query($con,$sql);
if (mysqli_num_rows($results)>0) {
  while ($row = mysqli_fetch_assoc($results)) {
    $commentid = $row['id'];
    $comment = $row['comment'];
    $string = covertHashtags($comment);
    echo "<p class='written'>";
    echo "<a href='users2?id = ".$row['user_id']."' style='color:black !important;'><b>".$row['username']."</b></a>";
    echo "  ".$string;
     $sql3 = "SELECT * FROM comment where id ='$commentid' and user_id='$id' order by comment desc limit 5 ";
$results3 = mysqli_query($con,$sql3);
     if (mysqli_num_rows($results3)>0) {

      echo "<div class='dropdown'>
  <img src='ellipsis.png' class='dots'>
  <div class='dropdown-content'>
    <br><p  class='delete' data-delete = ".$commentid.">delete</p>
  </div>
</div>";

    } 
    else{
      echo "";
    }

     echo "</p>";  


  }
}else{
  echo "";
}

            ?>

          </div>
      </div>
      <br><br>



    <?php } ?>

и мой JavaScript

<script type = "text/javascript">
  $(document).on('click','.submit',function(e){
     e.preventDefault();
   //Get values of input fields from DOM structure 
   var dataString = {
        id: $(this).parent().find("#id").val(),
        username: $(this).parent().find("#username").val(),
        uid: $(this).parent().find("#uid").val(),
         comment: $(this).parent().find("#comment").val()
    };

   $.ajax({
   url:'comments.php',  
   data:dataString,
   success:function(){
$('#comments').append('<b>'+username+'</b>: '+comment);    
   }
   });
});
</script>

Что я делаю неправильно ? я обновил свой код и добавил весь PHP-код Заранее спасибо.