JSFiddle - React, Tailwind, and code Playground

HTML

<div class="event_months">
    <a class="prev" href="#">&#60;</a>
    <a class="next" href="#">&#62;</a>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
</div>

CSS

.event_months li {
    display:none;
}

.event_months .doShow {
    display:list-item;
}

.event_months .first {
    display:inline !important;
}

JavaScript

$(".event_months li:nth-child(3)").addClass("doShow");



    $("a.next").click(function() {
        $('.first').toggleClass("first");
        var $toHighlight = $('.doShow').next('li').length > 0 ? $('.doShow').next('li') : $('.event_months li').first();
        $('.doShow').removeClass('doShow');
        $toHighlight.addClass('doShow');
    });

    $("a.prev").click(function() {
        $('.first').toggleClass("first");
        var $toHighlight = $('.doShow').prev('li').length > 0 ? $('.doShow').prev('li') : $('.event_months li').last();
        $('.doShow').removeClass('doShow');
        $toHighlight.addClass('doShow');
    });