I have been working on a custom eCommerce WordPress theme project. I just got everything done fine but stuck at loop while trying to load next page of loop posts through AJAX.

Actually, I have seen in many sites and WP themes such as Flatsome, when someone clicks on Show More Posts, it load the next page i.e. https://abc.xyz/page2/ without actually reloading the page. It just refreshes the content on same page and adds next page just below the first page.

I tried I coded a short JQuery so that I could load next page this way, but it did not seem to work. Can someone please find out what is wrong in my code and how it could be fixed?

archive.php

<div class="posts">
  <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>

      <div class="entry-content">
        <?php the_title(); ?> // just to test if it works //
      </div>

    <?php endwhile; ?>

    <div class="posts-navigation">
      <a>Load More</a>
    </div>
  <?php endif;?>
</div>

My AJAX jQuery

$('body').on('click', '.posts-navigation a', function (e) {

    let $page = $(this).attr('href');

    e.preventDefault();

    //update the button so the user knows something is happening
    $(this).text('Loading...').addClass('loading');

    $.get($page, function (data) {
      //filter the received data and store the required vars
      let $items = $(data).find('.entry-content'),
          $nextpage = $(data).find('.posts-navigation a').attr('href'),
          $container = $('.posts');

      //append the new posts to the posts wrapper
      $container.append($items);

      //now we can update the button so it's ready for the next batch of posts, and at the same time check if there is another link to the next page
      $('.posts-navigation a').text('Load More').attr('href', $nextpage);

      //check if there are no more posts to load by looking for the href in the received data
      //if there is no next page link, it will be undefined. hence, we can then hide the pagination button (or remove() if you wish).
      if ($nextpage === undefined) {
        $('.posts-navigation a').hide();
      }
    });
  });

Please let me know how it could be fixed.