JSFiddle - React, Tailwind, and code Playground

by subskybox

HTML

<body>
 
<div>
  <ul>
    <li class="boom">John;</li>
    <li class="boom">Karl;</li>
    <li class="boom">Brandon;</li>
  </ul>
</div>
<div>
  <ul>
    <li class="boom">Sam</li>
  </ul>
</div>
<div>
  <ul>
    <li class="boom">Glen;</li>
    <li class="boom">Tane;</li>
    <li class="boom">Ralph;</li>
    <li class="boom">David;</li>
  </ul>
  <ul>
    <li class="boom">1</li>
    <li class="boom">2</li>
    <li class="boom">3</li>
    <li class="boom">4</li>
    <li class="boom">5</li>
    <li class="boom">6</li>
    <li class="boom">7</li>
    <li class="boom">8</li>
  </ul>
</div>
</body>

JavaScript

//$('.boom').slice(3).append( "<span>*</span>" );
//$( ".boom:nth-child(3)" ).append( "<span>...</span>" );
//$( ".boom:nth-child(3)" ).nextAll().hide();
//$('.boom:visible:last').append( "<span>...</span>" );
//$( ".boom:nth-child(4)" ).prev().append( "<span>*</span>" );
//$( ".boom:nth-child(4)" ).prev().html(function (_,h) {return h.replace(/\;$/, '...');}).nextAll().hide();
//$('#mainn').html(function (_,h) {return h.slice(0, -1);});
//document.write($( ".boom:nth-child(14)" ));