Comment overlaps to one another - php

Question

I am creating a comment system in PHP (laravel5.5), and jQuery, but when I comment using ajax and then showing the just commented string it overlaps to the previous commented div. How can I show the new comment just after the previous comment?.
my code are as follow:
<div class="container">
<div class="col-md-12">
<div class="panel panel-default widget">
<div class="panel-heading" style="background: #D8E4FC">
<i class="fa fa-comments-o" aria-hidden="true" style="font-size: large"></i>
<h3 class="panel-title">Recent Comments </h3>
<span class="label label-info">{{ $total_comments }}</span>
</div>
<div class="comment-box" id="comment_box">
<?php
foreach ($comments as $comment):
if($comment->video_id == $content_record->code && $comment->comment_type == 1){
?>
<div class="comment" id="comment<?php echo $comment['user_id']; ?>">
<div class="author-thumbnail">
<img src="{{ getProfilePath($comment['image'], 'thumb') }}" alt="<?php echo $comment['video_id']; ?>">
</div>
<div class="comment-text"><strong>
<?php echo $comment['user_id']; ?></strong> - posted
{{ $comment['created_at']->diffForHumans()}}
</div>
<div class="text">
{{ $comment['comment'] }}
</div>
</div>
<?php
foreach ($replys as $reply):
if($reply->video_id == $content_record->code && $reply->replay_for == $comment->id){
?>
<div class="comment coment-replay">
<div class="author-thumbnail"><img src="{{ getProfilePath($reply['image'], 'thumb') }}" alt=""></div>
<div class="comment-text"><strong><?php echo $reply['user_id']; ?></strong> - posted
{{ $reply['created_at']->diffForHumans()}}
</div>
<div class="text">
{{ $reply['comment'] }}
</div>
</div>
<?php
}
endforeach;
?>
<?php
// if(($replys_method =='both' || $replys_method =='ovoo')) :
?>
<div class="comment coment-replay">
<form>
<textarea name="reply" id="reply_{{$comment['id']}}" class="form-control" rows="2" placeholder="Repay" required></textarea>
<input type="hidden" name="video_id1" value="{{$content_record->code}}">
<input type="hidden" id="reply_for_{{$comment['id']}}" name="url1" value="{{$comment['id']}}">
<input type="hidden" name="comment_type1" id="comment_type1" value="2">
<input type="hidden" name="publication1" id="publication1" value="1">
<div>
<?php
$user = auth()->user();
if(!empty($user->id))
{
?>
<button type="submit" value="submit" class="btn btn-success btn-sm pull-right reply ">
<span class="btn-label">
<i class="fi ion-ios-undo-outline"></i></span>Replay </button>
<?php }else{ ?>
<a class="btn btn-success" href="{{URL_USERS_LOGIN}}" style=" margin: 10px 13px;float: right; padding: 5px 7px 5px 10px;"> <span class="btn-label"><i class="fi ion-log-in"></i></span>Login to Replay </a>
<?php } ?>
</div>
</form>
</div>
<script type="text/javascript">
$(".reply").click(function(e){
e.preventDefault();
var namer = '{{$content_record->code}}';
var passwordr = $("#reply_for_{{$comment['id']}}").val();
var comntr = $("#reply_{{$comment['id']}}").val();
var comnttyper = $("#comment_type1").val();
var publicationr = $("#publication1").val();
var tokenr = '{{ csrf_token() }}';
$.ajax({
type:'POST',
url: '{{ URL_COMMENTS_ADD }}',
data:{video_id:namer, url:passwordr, comment:comntr, _token:tokenr, publication:publicationr, comment_type:comnttyper},
success:function(data){
alert('Your comment has been post wait for approval');
console.log(data);
$("#reply").val("");
},
error: function (error) {
alert('Please Login First Before Comment.');
}
});
});
</script>
<?php
}
// endif;
endforeach;
if($total_comments == 0){
echo "<style> #comment-container{margin-top:0px !important} </style>";
}else{
echo "<style> #comment-container{margin-top:50px !important} </style>";
}
?>
</div>
<div id="comment-container">
<div class="movie-heading overflow-hidden"> <span class="wow fadeInUp" data-wow-duration="0.8s">Leave a comment</span>
<div class="disable-bottom-line wow zoomIn" data-wow-duration="0.8s"></div>
</div>
<!-- {!! Form::open(array('url' => URL_COMMENTS_ADD, 'method' => 'POST', 'files' => true, 'name'=>'formComments ', 'novalidate'=>'')) !!} -->
<form>
<input type="hidden" name="video_id" value="{{$content_record->code}}">
<input type="hidden" name="url" value="{{ $video_src }}">
<input type="hidden" name="comment_type" id="comment_type" value="1">
<input type="hidden" name="publication" id="publication" value="0">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<textarea name="comment" id="cmnt-user-msg" rows="4" class="form-control" placeholder="Write comment here" required></textarea>
<div class="input-top-line"></div>
<div class="input-bottom-line"></div>
</div>
</div>
<div class="col-sm-12">
<?php
$user = auth()->user();
if(!empty($user->id))
{
?>
<button type="submit" value="submit" class="btn btn-success" id="commen"> <span class="btn-label"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> </span> Post Comments </button>
<?php
}
else
{
?>
<a class="btn btn-success" href="{{URL_USERS_LOGIN}}"> <span class="btn-label"><i class="fi ion-log-in"></i></span>Login to Comments </a>
<?php
}
?>
</div>
</div>
</form>
<!-- {!! Form::close() !!} -->
</div>
</div>
</div>
</div>
my jquery code is as following
$("#commen").click(function(e){
e.preventDefault();
var name = '{{$content_record->code}}';
var password = $("input[name=url]").val();
var comnt = $("#cmnt-user-msg").val();
var comnttype = $("#comment_type").val();
var publication = $("#publication").val();
var token = '{{ csrf_token() }}';
$.ajax({
type:'POST',
url: '{{ URL_COMMENTS_ADD }}',
data:{video_id:name, url:password, comment:comnt, _token:token, publication:publication, comment_type:comnttype},
success:function(data){
console.log(data);
$('#comment_box').html('<div class="comment" id="comment"'+data.id+'"><div class="author-thumbnail"><img src="{{ getProfilePath("'+data.user_image+'", "thumb") }}" alt="'+data.video_id+'"></div><div class="comment-text"><strong>'+data.user_name+'</strong> - posted just now </div> <div class="text">'+data.comment+'</div> </div>');
alert('Your comment has been post wait for approval');
$("#cmnt-user-msg").val("");
},
error: function (error) {
alert('Comments after some time later.');
}
});
But it shows this instead in the image shared right here below
only the single comment shows and overlap the previous one, I want to add it after previous commented comment if comment

Answer 1

You are using the html() method which only returns the content of an element, instead use the append() method which adds the content of an element to the end of a parent element.
Use append like this:
$('#comment_box').append('<div class="comment"
id="comment"'+data.id+'"><div class="author-thumbnail"><img src="{{ getProfilePath("'+data.user_image+'", "thumb") }}" alt="'+data.video_id+'"></div><div class="comment-text"><strong>'+data.user_name+'</strong> - posted just now </div> <div class="text">'+data.comment+'</div> </div>');
This will add the div class of "comment" at the end of the parent id "comment_box"