I am trying to open specific comments related to post using Jquery-CodePudding

I am trying to open specific Comments related to post but when i click to view more comments so all comments is opening but i want to open comments related to post not all please help me how can resolved that ? thank u

html view

<div >
  @foreach ($communityPosts->communityPostReply as $communityPostReplies)
  <div >
      <div >
         
          <div >
          <span >{{$communityPostReplies->users->full_name}}</span>
         
          <p >{{$communityPostReplies->reply_body}}</p>
          <span >{{$communityPostReplies->created_at->diffForHumans()}}</span>
          </div>
      </div>
  </div>
  @endforeach
  <a style="cursor: pointer;" >View More Comments</a>

Here is my Jquery

  $(function(){
      $(".user-comment-box").slice(-5).show(); // select the first 5 hidden divs
      $(".see-more").click(function(e){ // click event for load more
          e.preventDefault();
          var done = $('<div ></div>');
          $(".user-comment-box:hidden").slice(-5).show(); // select next 5 hidden divs and show them
          if($(".user-comment-box:hidden").length == 0){ // check if any hidden divs
              $(".see-more").replaceWith(done); // if there are none left
          }
      });
    });

CodePudding user response：

You should limit your selectors to just the current .comment-box div.

$(function() {
  $(".user-comment-box").slice(-5).show(); // select the first 5 hidden divs
  $(".see-more").click(function(e) { // click event for load more
    e.preventDefault();
    let current_post = $(this).closest(".comment-box");
    var done = $('<div ></div>');
    current_post.find(".user-comment-box:hidden").slice(-5).show(); // select next 5 hidden divs and show them
    if (current_post.find(".user-comment-box:hidden").length == 0) { // check if any hidden divs
      $(this).replaceWith(done);
    }
  });
});