在Laravel 5中隐藏的CSS Div无法正常工作

我正在使用Css隐藏div隐藏的注释，如果用户单击加载更多，则注释将显示。但是，如果有多个状态。单击按钮时，所有评论将一起加载。这里有什么问题？

<style>

/*Comment pagination*/
#comment {
display:none;
}
</style>

这是我的看法

 @if($post->comments()->count()===0)
                            @else
<div class="inner-all block">
   <a href="#" id="loadMore-{{$post->id}}" class="btn btn-primary btn-sm" style="margin-top:3px; ">Load More Comment ({{ $post->comments()->count() }})</a>
</div>
@endif

这是我的评论区

@foreach($post->comments as $comment)
                                <div id="comment">
                            <div class="line no-margin"></div><!-- /.line -->

                            <div class="media inner-all no-margin">
                                <div class="pull-left">
                                    <img src="{{ asset('user_profile_image/'. $comment->user->profile_image) }}" alt="{{$comment->user->name}}" class="img-post2">
                                </div><!-- /.pull-left -->
                                <div class="media-body">
                                    <a href="{{ route('profile.index',['id'=>$comment->user->id]) }}" class="h4"><span style="font-size: medium;">{{$comment->user->name}}</span></a>
                                    <medium class="block text-muted">{{ $comment->comment }}</medium><br>
                                    <em class="text-xs text-muted">Posted on <span class="text-danger">{{$comment->created_at->diffForHumans()}}</span></em>
                                </div><!-- /.media-body -->
                            </div><!-- /.media -->
                                </div>
                                @endforeach

然后，我使用JavaScript来检测操作。

 @foreach($posts as $post)
<script>
    $(function () {
        $("#comment").slice(0, 4).show();
        $("#loadMore-{{$post->id}}").on('click', function (e) {
            e.preventDefault();
            $("div:hidden").slice(0, 18).slideDown();
            if ($("div:hidden").length == 0) {
                $("#load").fadeOut('slow');
            }
            /**
            $('html,body').animate({
                scrollTop: $(this).offset().top
            }, 1500);
             **/
        });
    });

</script>
@endforeach

我希望使用不同的ID来跟踪哪个div应该处于活动状态，但似乎无法正常工作。这里有什么建议吗？