如何在每个按钮单击时仅显示3条评论，然后再显示10条评论

I am creating a standard comment system to (for example) a post, but I have a hard time displaying them they way I want. I can easily display all the comments at once, but I want to display for example 3 comments at first, and then a button that will add 10 comments on each following on-click.

At first, I tried making an AJAX on click event that would load a new php page into the div where the comments are shown. The problem is, that the div can be referred to by class or by ID, and if they are referred to by class, then the new comments will replace the 3 already shown comments (effectively doing a 3x10 display), and if the div is referred to by ID, then the new comments will replace the first of the 3 already shown comments.

<?php
$followingposts = DB::query('SELECT posts.id, posts.body, posts.likes, posts.comments, posts.posted_at, users.`username`, fullname FROM users, posts, followers WHERE posts.user_id = followers.user_id AND users.id = posts.user_id AND follower_id = :userid ORDER BY posts.likes DESC;', array(':userid'=>$userid));
foreach ($followingposts as $post) {
?>
    <div…

I have this to display the first 3 comments within the posts which works fine:

<?php
$commentsposts = DB::query('SELECT comments.id, comments.comment, comments.post_id, comments.likes, comments.comments, comments.posted_at, users.username, fullname
FROM comments, users
WHERE post_id = :postid
AND comments.user_id = users.id
ORDER BY comments.posted_at
DESC LIMIT 3;', array(':postid'=>$post['id']));

and then another foreach loop for the comments:

foreach ($commentsposts as $comments) {
?>
<div class="posts_comments" id="posts_comments_id">
...

and then an AJAX function (called from a button):

function show_more_comments_click(elem) {
var post_id = $(elem).attr('value');
 var commentCount = 3; 
commentCount = commentCount + 10; 
$('#posts_comments_id').load('./inc/load_comments.php', {
commentNewCount: commentCount
});
};

That loads this:

<?php
$commentNewCount = $_POST['commentNewCount'];

$commentsposts = DB::query("SELECT comments.id, comments.comment, comments.post_id, comments.likes, comments.comments, comments.posted_at, users.username, fullname FROM comments, users WHERE post_id = :postid AND comments.user_id = users.id ORDER BY comments.posted_at DESC LIMIT 0,$commentNewCount;", array(':postid'=>$post_id));

foreach ($commentsposts as $comments) {
?>
...

But I can't get the new comments below the already shown 3 comments. Any suggestions in how to achieve this? Thanks in advance.

Have you tried to show first 3 comments in a div container with id eg:

<div id="commentContainer">
  <div id="comment1" data-comment-id="1" class="comments">
    -- comment html --
  </div>
  <div id="comment2" data-comment-id="2" class="comments">
    -- comment html --
  </div>
  <div id="comment3" data-comment-id="3" class="comments">
    -- comment html --
  </div>
</div>

and then click on button will send a ajax request with recent comment id eg: comment3. which will help script to collect next 10 comments eg: comment4, comment5 so on and append (jQuery append() function) those new comments html into the div you already have with container id eg: commentContainer.

<div id="commentContainer">
  <div id="comment1" data-comment-id="1" class="comments">
    -- comment html --
  </div>
  <div id="comment2" data-comment-id="2" class="comments">
    -- comment html --
  </div>
  <div id="comment3" data-comment-id="3" class="comments">
    -- comment html --
  </div>
  <div id="comment4" data-comment-id="4" class="comments">
    -- comment html --
  </div>
  <div id="comment5" data-comment-id="5" class="comments">
    -- comment html --
  </div>
  <div id="comment6" data-comment-id="6" class="comments">
    -- comment html --
  </div>
  <div id="comment7" data-comment-id="7" class="comments">
    -- comment html --
  </div>
  <div id="comment8" data-comment-id="8" class="comments">
    -- comment html --
  </div>
  <div id="comment9" data-comment-id="9" class="comments">
    -- comment html --
  </div>
  <div id="comment10" data-comment-id="10" class="comments">
    -- comment html --
  </div>
  <div id="comment11" data-comment-id="11" class="comments">
    -- comment html --
  </div>
  <div id="comment12" data-comment-id="12" class="comments">
    -- comment html --
  </div>
  <div id="comment13" data-comment-id="13" class="comments">
    -- comment html --
  </div>
</div>

Rest you're already collecting the comments with your server file and mysql queries.

Thanks

</div>