How to queue nested replies below comments on a comment page

How to queue nested replies below comments on a comment page

Need some assistance to get around this please guys.
I’m building a nested comment page on my website with the comments/replies stored in an sql table with colums id, name, title, body, parent_id and time. Parent comments are to have parent_id of 0 while replies to the comments have a parent_id of the id of the comments been replied to. That works perfectly well.
Now I have a php page that echoes the output of the sql select statement of these columns as json encoded data :

  1. $stmt=$conn->prepare("SELECT * FROM comments ORDER BY created_at DESC");
  2.             $stmt->execute();
  3.             $result = $stmt->get_result();
  4.             $num_of_rows = $result->num_rows;
  5.             if ($num_of_rows > 0){
  6.                 $dataArray = array();
  7.                 while ($row = $result->fetch_assoc()){
  8.                     $data['id'] = $row['id'];
  9.                     $data['name'] = $row['name'];
  10.                     $data['title'] = $row['title'];
  11.                     $data['body'] = $row['body'];
  12.                     $data['parent_id'] = $row['parent_id'];
  13.                     $data['time'] = strtotime($row['created_at']);
  14.                     $data['time'] = date('d M, H:i a', $data['time']);
  15.                     $dataArray[] = $data;
  16.                 }
  17.             echo json_encode($dataArray);
  18.            }
  19.         ?>   
Now in my script, I parsed the json fetched from the fetch_comments.php file into a dynamically generated html depending on if it’s a comment (with parent_id = 0) or a reply to a comment like so:

  1. function getComments(){
  2.         $.getJSON("fetch_comments.php", function(data){
  3.             $.each(data, function(i, user){
  4.                 if (user.parent_id == 0){//if its a comment
  5.                     var comment = '<div class="row" id="media" data-id='+user.id+'>\
  6.                                       <div class="col-md-1" id="media-left">\
  7.                                          <a href="#">\
  8.                                            <img src="images/user.png" alt="image" width="50px" height="50px" >\
  9.                                          </a>\
  10.                                       </div>\
  11.                                       <div class="col-md-11" id="media-body">\
  12.                                          <h4 class="media-heading">'+user.title+'</h4>\
  13.                                          <h4><strong>'+user.name+'</strong></h4> @ '+user.time+'</h4>\
  14.                                        <div class="media-text">\
  15.                                          <p>'+user.body+'</p>\
  16.                                        </div>\
  17.                                        <div class="rep_lnk">\
  18.                                           <a class="reply_link"><strong>Reply</strong></a>\
  19.                                        </div><br/>\
  20.                                        <div class="row">\
  21.                                           <div class="col-md-1"></div>\
  22.                                           <div class="col-md-10">\
  23.                                               <div class="reply_form_wrapper"></div><br/><br/>\
  24.                                               <div class="reply_queue"></div>\
  25.                                           </div>\
  26.                                     </div>\
  27.                                 </div>';
  28.                         $(".media-wrapper").append(comment);//.media-wrapper is an empty main container class on the html page
  29.                        
  30.                     }else{//if its a reply
  31.                         var par_id = user.parent_id;
  32.                         var parent_cont = $(".media-wrapper").find("#media[data-id='+par_id+']");
  33.                         var replies = '<div class="media_left">\
  34.                                        <a href="#">\
  35.                                          <img src="images/user.png" alt="image" width="50px" height="50px" >\
  36.                                        </a>\
  37.                                      </div>\
  38.                                     <div class="reply_media_body">\
  39.                                         <h4>'+par_id+'</h4><h4>'+user.id+'</h4>\
  40.                                         <h4 class="reply_media_heading"><strong>'+user.name+'</strong> @ '+user.time+'</h4>\
  41.                                         <div class="reply_media_text">\
  42.                                             <p>'+user.body+'</p>\
  43.                                         </div>\
  44.                                     </div>';
  45.                         parent_cont.find(".reply_queue").append(replies);
  46.                     }
  47.                 });
  48.             });
  49.         }
Now my challenge is that my replies are not appending to the .reply_queue div. Rather, few of them are displayed in the media-wrapper div like normal comments.
I can't just figure what i'm doing wrong. Any assistance will be appreciated please.