JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="timeList">
       <li class="timeSlot">8:00</li>
       <li class="timeSlot">9:00</li>
       <li class="timeSlot">10:00</li>
       <li class="timeSlot">11:00</li>
       <li class="timeSlot">12:00</li>
       <li class="timeSlot">13:00</li>
       <li class="timeSlot">14:00</li>
       <li class="timeSlot">15:00</li>
    </ul>
    <ul class="timeList">
       <li class="timeSlot">8:00</li>
       <li class="timeSlot">9:00</li>
       <li class="timeSlot">10:00</li>
       <li class="timeSlot">11:00</li>
       <li class="timeSlot">12:00</li>
       <li class="timeSlot">13:00</li>
       <li class="timeSlot">14:00</li>
       <li class="timeSlot">15:00</li>
       <li class="timeSlot">16:00</li>
       <li class="timeSlot">17:00</li>
    </ul>   <ul class="timeList">
       <li class="timeSlot">8:00</li>
       <li class="timeSlot">9:00</li>
       <li class="timeSlot">10:00</li>
    </ul>

CSS

.timeList { width: 70px; float: left; list-style-type: none; }

JavaScript

jQuery(function () {
    
        jQuery(".timeList").each(function () {
            // reference to the list
            var theList = jQuery(this);
            // reference to it's LIs that have .timeSlot
            var kids = theList.children(".timeSlot");
            // manipulate after element 5
            kids.filter(":gt(4)").css('color','red');
            //add a MORE link if we have more than 5
            if (kids.length > 5) {
                theList.append('<li class="slotMoreLess">MORE</li>');
            }
        });
    
     // ADDS EVENT LISTENTER TO MORE / LESS BUTTONS
    jQuery(".timeList").on('click', ' li.slotMoreLess', function (event) {
        // do neat stuff here
        // jQuery(this) will be the MORE / LESS button LI.
        alert( jQuery(this).text() );
        // jQuery(this).parent() will be the UL 
    });
});