JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myList">
  <article>One</article>
  <article>Two</article>
  <article>Three</article>
  <article>Four</article>
  <article>Five</article>
  <article>Six</article>
  <article>Seven</article>
  <article>Eight</article>
  <article>Nine</article>
  <article>Ten</article>
  <article>Eleven</article>
  <article>Twelve</article>
  <article>Thirteen</article>
  <article>Fourteen</article>
  <article>Fifteen</article>
  <article>Sixteen</article>
  <article>Seventeen</article>
  <article>Eighteen</article>
  <article>Nineteen</article>
  <article>Twenty one</article>
</div>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

CSS

#myList article {
   display: none;
}

#loadMore {
  color: green;
  cursor: pointer;
}

#showLess {
  color: red;
  cursor: pointer;
}

#loadMore:hover,
#showLess:hover {
  color: black;
}

JavaScript

var articles = $('article');
var groupNum = 0;
var currentGroupNum = 0;
$.each(articles, function(index, value) {
  $(this).attr("class", "group" + groupNum);
  if ((index + 1) % 5 === 0) {
    groupNum++;
  }
});


$('#loadMore').on('click', function() {		
    $(".group" + currentGroupNum).show()
    currentGroupNum++;
});

$('#showLess').on('click', function() {
	$(".group" + (currentGroupNum - 1)).hide()
  currentGroupNum--;
});