Javascript toggle hide and show buttons in a loop Laravel 5

Question

I am writing a Laravel 5 project with a comment section code below

@foreach($Comment as $Comment)
  <div id="comment-{!! $Comment->comments_id !!}" class="comment-wrapper">

     <div class="btn btn-lg btn-info btn-xs" class="show">Show</div>
  <div class="btn btn-lg btn-success btn-xs" class="hide">Hide</div>
  <div class="btn btn-lg btn-warning btn-xs" class="toggle">Toggle</div>

      <div class="watch" class="jumbotron alert-info">



         <ul class="list-group">
           <li class="list-group-item list-group-item-success">{!! $Comment->author  !!}</li>
           <li class="list-group-item"> {!! $Comment->text !!}</li>
           </ul>
             @if ($Comment->author == Auth::user()->name)
               <p><a href="{!! URL::route('deleteComment', $Comment->comments_id) !!}"  class=" btn-danger btn-xs" style="float:right">Delete</a></p>  



              @endif

        <h6><small>CREATED ON: {!! $Comment->created_at !!}</small></h6>
</div>
</div>
          @endforeach

and I have a javascript file which looks like this

 $(document).ready(function () {

 $('.show').click(function () {
    $(this).closest('.comment-parent').find('.watch').show('slow');
});
 $('.hide').click(function () {
    $(this).closest('.comment-parent').find('.watch').hide('slow');
});
 $('.toggle').click(function () {
    $(this).closest('.comment-parent').find('.watch').toggle('slow');
});

});

The trouble is the toggle/hide javascript function only works on one set of buttons and hides all of the comments. I want to have the set of buttons that work for each comment individually. I've tried to increment the watch class and buttons div id by adding 1 and incrementing it for each comment but can't get it to work. Any help would be appreciated thanks.

Answer 1

You may try something like this:

$('#show').click(function () {
    $(this).next('.watch').show('slow');
});

Try same approach for other methods, so only the next first div with class of watch will be acted and also, you could have wrapped each set in a single parent container using a unique id attribute in addition to a class, for better grouping. For example:

@foreach($Comment as $Comment)
    <div id="comment-{{$comment->id}}" class="comment-wrapper">
        <div class="btn btn-lg btn-info btn-xs show">Show</div>
        <!-- More... -->
        <div class="watch" class="jumbotron alert-info">
            <!-- More... -->
        </div>
    </div>
@endforeach

This way, you could have done the jQuery slecting more specifically, for example:

$('#show').click(function () {
    $(this).closest('.comment-parent').find('.watch').show('slow');
});

Update (Thanks to haakym for pointing me that): Also, an id must be unique so instead of using id='show' use it as a class and then use:

$('.show').click(function () {
    $(this).closest('.comment-parent').find('.watch').show('slow');
});