JSFiddle - React, Tailwind, and code Playground

by Mukul kant

HTML

<ul><li><a href="#"  id="prev"><< Previous</a></li>
    <li>
<ul style= 'list-style-type: none;'  class="filter1">
        <li><span class="filtercat1">red</span></li>
        <li><span class="filtercat1">blue</span></li>
        <li><span class="filtercat1">yellow</span></li>
        <li><span class="filtercat1">all</span></li>
    </ul>
</li>
<li><a href="#" id="next">Next</a></li>
</ul>

CSS

<style>
.active { display: inline; }

.passiv { display: none; }
ul li, ul li ul {display:inline;}
ul#list li { 
    list-style-type:none;
  
}
</style>

JavaScript

$(function () {
    var all = $('.filtercat1').addClass("passiv");

    var i = -1;

    $('#prev' ).click(function () {
        ctrlbutton(i = !i ? all.length - 1 : --i);
    });
    $('#next').click(function () {
        ctrlbutton(i = ++i % all.length);
    }).click();

    function ctrlbutton(ele) {
        all.removeClass("active").addClass("passiv");
        all.eq(ele).removeClass("passiv").addClass("active");
    }

    
})