JavaScript — Показать / Скрыть элементы, которые генерируются в цикле foreach

Я зацикливаю записи на форуме, и рядом с каждой я поместил кнопку, чтобы показать или скрыть форму ответа на комментарий, я получил это для работы с помощью простого скрипта JS. Однако, поскольку скрипт зациклен, он работает только для верхнего. возможно потому, что он не может идентифицировать каждый элемент, используя идентификатор, потому что идентификатор не будет уникальным (а класс заставит их всех показать / скрыть). Я думал добавить что-то вроде {{$ comment-> id}} к идентификатору, чтобы оно было уникальным, но я не могу использовать сценарий JS? могу я?

Ниже приведен соответствующий код:

@extends('layout')

@section('head')
<script>
$(document).ready(function(){
$("#showhidereply").click(function(){
$("#replycomment").toggle();
});
});
</script>
@stop

@section('content')
...
<!-- Comments -->
@foreach ($post->comments as $comment)
<span class="pull-right">
<div class=" btn-group">
<button class="btn btn">
<span class="glyphicon glyphicon-picture"></span> Owner's Name Here
</button>
<button class="btn btn btn-primary" id="showhidereply">
<span class="fa fa-reply"></span>
</button>
</div>
</span>
<p>{{ $comment->body }}</p>
</div>

<form method="POST" action="/forum/{{ $post->id }}/comments/{{ $comment->id }}/newresponse" id="replycomment">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="input-group" style="padding-top: 5px;">
<input type="text" name="body" class="form-control"></input>
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">Reply to Comment</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
@endforeach
</div>
</div>
@stop

У меня есть кто-то сделать предложение изменить на:

кнопка

<button class="btn btn btn-primary" class="showhidereply" data-id="{{ $comment->id }}">
<span class="fa fa-reply"></span>
</button>

форма

<form method="POST" action="/forum/{{ $post->id }}/comments/{{ $comment->id }}/newresponse" id="replycomment-{{ $comment->id }}">

скрипт

<script>
$(document).ready(function(){
// change the selector to use a class
$(".showhidereply").click(function(){
// this will query for the clicked toggle
var $toggle = $(this);

// build the target form id
var id = "#replycomment-" + $toggle.data('id');

$( id ).toggle();
});
});
</script>

Но это все еще не работает, но все элементы теперь уникальны.

Большое спасибо!