JSFiddle - React, Tailwind, and code Playground

by Blink

HTML

<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>

<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>

CSS

.test {
 background-color: red   
}

JavaScript

$('ul').each(function() {
    var listItems = $(this).children();
    var cutOffElement = listItems.eq(3);
    var link = $('<li class="see-all"><a href="#"></a></li>');
    
    link.find('a').text('See all ' + listItems.length + ' tracks on this disc')
    cutOffElement.after(link);
    link.nextAll().wrapAll('<div class="test"></div>');
});