<ul class="list">
  <li class="list-item">Item 1</li>
  <li class="list-item">Item 2</li>
  <li class="list-item">Item 3</li>
  <li class="list-item ">Item 4</li>
  <li class="list-item ">Item 5</li>
</ul>
<button class="btn">Ещё</button>
.list {
  display: flex;
  list-style: none;
}

.list-item {
  margin-right: 20px;
  width: 100px;
  height: 100px;
  text-align: center;
  background-color: #cacaca;
}

._hidden {
  display: none;
}

.btn {
  margin-left: 190px;
}
//  const more = document.querySelectorAll('.btn');
//       for (let i = 0; i < more.length; i++) {
//         more[i].addEventListener('click', function () {
//           let showPerClick = 2;

//           let hidden = this.parentNode.querySelectorAll('li._hidden');
//           for (let i = 0; i < showPerClick; i++) {
//             if (!hidden[i]) return this.outerHTML = "";
//             hidden[i].classList.remove('_hidden');
//           }
//         });
//       }

$(document).ready(function(){

      var list = $(".list li");
      var numToShow = 2;
      var button = $(".btn");
      var numInList = list.length;
      list.hide();
      if (numInList > numToShow) {
        button.show();
      }
      list.slice(0, numToShow).show();

      button.click(function(){
          var showing = list.filter(':visible').length;
          list.slice(showing - 1, showing + numToShow).fadeIn();
          var nowShowing = list.filter(':visible').length;
          if (nowShowing >= numInList) {
            button.hide();
          }
      });

});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js