JSFiddle - React, Tailwind, and code Playground

HTML

<div class="inner-content">
  <div class="front-pro">151</div>
  <div class="front-pro">151</div>
  <div class="front-pro">151</div>
  <div class="front-pro">151</div>
  <div class="front-pro">151</div>
  <div class="front-pro">151</div>
  <div class="front-pro">151</div>
  <div class="front-pro">151</div>
  <div class="front-pro">151</div>
  <div class="front-pro">151</div>
  <div class="front-pro">151</div>
  <div class="front-pro">151</div>
  <div class="front-pro">152</div>
  <div class="front-pro">152</div>
  <div class="front-pro">152</div>
  <div class="front-pro">152</div>
  <div class="front-pro">152</div>
  <div class="front-pro">152</div>
  <div class="front-pro">152</div>
  <div class="front-pro">152</div>
  <div class="front-pro">152</div>
  <div class="front-pro">152</div>
  <div class="front-pro">152</div>
  <div class="front-pro">152</div>
  <div class="front-pro">153</div>
  <div class="front-pro">153</div>
  <div class="front-pro">153</div>
  <div class="front-pro">153</div>
</div>

<div>next</div>

JavaScript

var x = $(".inner-content div").hide();

$("div:contains(next)").click(function() {
  var cnt = $(this).data("cnt") || 0;
  if((cnt * 12) > x.length){ cnt = 0; }
  x.hide().filter(":eq("+ (cnt * 12)  + "), :lt(" + ((cnt * 12) + 12) + "):gt(" + (cnt * 12) + ")").show();
  $(this).data("cnt", ++cnt);
});