Jquery - Show next 3 items on each click and hide button (if item exists)

Question

Used below HTML to show 3 Div on page load. On each click, show next 3 items. If no item exists, hide the button.

Below JS code, working fine on page load to show 3 DIVs. But, when i click "load more", instead of show next 3 items, it shows all items in the list.

Please let me know how to solve this issue?

Thanks

$(".product-item--wrapper .product-item").hide();
$(".product-item--wrapper .product-item").slice(0, 3).show();
$("#more--products").on('click', function(e) {
  e.preventDefault();
  $(".product-item--wrapper .product-item:hidden").slice(0, 3).slideDown();
  if ($(".product-item--wrapper .product-item:hidden").length == 0) {
    $("#more--products").fadeOut('slow');
  }
});

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="product-item--wrapper">
  <div class="product-item">
    <a href="#">
      <div class="subtitle">Lorem ipsum is placeholder text commonly used in the graphic.</div>
    </a>
  </div>
  <div class="product-item">
    <a href="#">
      <div class="subtitle">Lorem ipsum is placeholder text commonly used in the graphic.</div>
    </a>
  </div>
  <div class="product-item">
    <a href="#">
      <div class="subtitle">Lorem ipsum is placeholder text commonly used in the graphic.</div>
    </a>
  </div>
  <div class="product-item">
    <a href="#">
      <div class="subtitle">Lorem ipsum is placeholder text commonly used in the graphic.</div>
    </a>
  </div>
  <div class="product-item">
    <a href="#">
      <div class="subtitle">Lorem ipsum is placeholder text commonly used in the graphic.</div>
    </a>
  </div>
  <div class="product-item">
    <a href="#">
      <div class="subtitle">Lorem ipsum is placeholder text commonly used in the graphic.</div>
    </a>
  </div>
  <div class="product-item">
    <a href="#">
      <div class="subtitle">Lorem ipsum is placeholder text commonly used in the graphic.</div>
    </a>
  </div>
</div>
<div class="button-wrapper">
  <button class="button button-primary button-rounded btn-block" id="more--products">Load more</button>
</div>

question from:https://stackoverflow.com/questions/65917171/jquery-show-next-3-items-on-each-click-and-hide-button-if-item-exists

Answer 1

Waitting for answers