JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div class="counter-block">
  <div class="counter-item">
  </div>
  <div class="counter-item">
  </div>
  <div class="counter-item">
  </div>
  <div class="counter-item">
  </div>
  <div class="counter-item">
  </div>
  <button class="custom-button">Click
  </button>
</div>

CSS

.counter-block {
  background: #ccc;
  height: 500px;
}

.counter-item {
  background: red;
  height: 50px;
  margin-bottom: 10px;
}
.custom-button {
  
}

JavaScript

$('.counter-block').each(function (indx, elem) {
  var
    $items = $('> div', elem),
    $button = $('> button', elem),
    z = 3, i;

  for (i = 0; i < $items.length; i++) {
    if (i < z) continue;
    $items.eq(i).hide();
  } 

  $button.on('click', function () {
    if (z >= $items.length) return;

    $items.eq(z).show();
    z++;

  });

});