How can I display reply forms in the comment section based on the specific comment reply button that has been clicked? Currently, it shows forms for all comments instead of just one. This is the question.
What steps should I take to target the closest form and display only one at a time?
Code
// This button exists in all comments with the same class
<button type="button" class="btn btn-sm btn-primary text-light reply">Reply</button>
// Reply form DIV
<div class="blog-form mt-6 replyComment" style="display:none">// Form goes here</div>
// New comment form DIV
<div class="blog-form mt-6 originalComment"> // Form goes here </div>
$('.reply').click(function (e) {
e.preventDefault();
$('.replyComment').show();
$('.originalComment').hide();
});
Update
Complete commenting code
<div class="blog-comments mt-4">
@include('errors.errors')
@if(isset($post))
@forelse($post->comments as $comment)
<div class="comments-1 w-100">
<div class="comments-photo">
@if(!empty($comment->user->avatar))
<img class="img-profile rounded-circle" src="{{url('images/idus')}}/{{ $comment->user->avatar }}" alt="{{$comment->user->name}}">
@else
<img class="img-profile rounded-circle" src="{{asset('img/red_avatar.jpg')}}" alt="{{$comment->user->name}}">
@endif
</div>
<div class="comments-info">
<h6> {{$comment->user->name}} <span>{{$comment->created_at->format('M d, Y')}}</span></h6>
<div class="port-post-social float-right">
<button type="button" class="btn btn-sm btn-primary text-light reply">Reply</button>
</div>
<p class="mt-1">{!! $comment->comment !!}</p>
</div>
</div>
<div class="blog-form mt-6 replyComment" style="display:none">
<h4 class="mb-3">Post a Reply</h4>
<form method="post" action="{{ route('reply.add') }}">
@csrf
<div class="gray-form row">
<div class="col-md-12">
<input type="hidden" name="comment_id" value="{{ $comment->id }}" />
@if(isset($post))
<input type="hidden" name="post_id" value="{{ $post->id }}" />
@elseif(isset($product))
<input type="hidden" name="product_id" value="{{ $product->id }}" />
@endif
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" rows="7" name="comment" placeholder="Comment"></textarea>
</div>
</div>
<div class="col-md-12">
<button class="button red" type="submit">SUBMIT</button>
</div>
<div>
</div>
</div>
</form>
</div>
@forelse($comment->replies as $reply)
// Comments and replies structure...
</div>
@empty
<h3>Be the first to leave a comment.</h3>
@endforelse
@empty
<h3>No comments yet.</h3>
@endforelse
@else
{{-- reserved for products reviews --}}
@endif
</div>
<div class="blog-form mt-6 originalComment">
<h4 class="mb-3">Post a Comment</h4>
<form method="post" action="{{ route('comments.store') }}">
@csrf
<div class="gray-form row">
<div class="col-md-12">
@if(isset($post))
<input type="hidden" name="post_id" value="{{ $post->id }}" />
@elseif(isset($product))
<input type="hidden" name="product_id" value="{{ $product->id }}" />
@endif
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control" rows="7" name="comment" placeholder="Comment"></textarea>
</div>
</div>
<div class="col-md-12">
<button class="button red" type="submit">SUBMIT</button>
</div>
<div>
</div>
</div>
</form>
</div>
Condensed forms above for easier comprehension
Structure
<comments>
-reply button
<reply form></reply form>
<comment reply>
-reply button
<reply form></reply form>
<comment reply replies>
<comment reply replies>
</comment reply>
</comments>
<comment form>
</comment form>