JSFiddle - React, Tailwind, and code Playground

by femfoyou

HTML

<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>


    <span id="filterbutton1">
        <a href="#" id="prev">« Previous</a> 
        <a href="#" id="next">Next »</a>

    </span>

    <ul style='list-style-type: none;' class="filter2">
        <li><span class="filtercat2">orange</span></li> 
        <li><span class="filtercat2">apple</span></li>
        <li><span class="filtercat2">papaya</span></li>
         <li><span class="filtercat2">all</span></li>

    </ul>
   
    <span id="filterbutton2">
        <a href="#" id="prev2">« Previous</a>
        <a href="#" id="next2">Next »</a>
    </span>

<ul id= 'list'> 
     <li class=""> red orange</li>
     <li class="all red apple"> red apple</li>
     <li class=""> red papaya</li>
     <li class=""> blue orange </li> 
     <li class=""> blue apple</li>
     <li class=""> blue papaya</li>
     <li class=""> yellow orange</li>
     <li class=""> yellow apple</li>
     <li class=""> yellow papaya</li>
    
</ul>

<span id="filterbutton">
        <a href="#" id="filter"> filter</a>
    
<span id="resetbutton">
        <a href="#" id="reset"> reset</a>

CSS

<style>
.active { display: inline; }

.passiv { display: none; }

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");
    }

    
})

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

    var i = -1;

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

    function ctrlbutton(ele) {
        all.removeClass("active").addClass("passiv");
        all.eq(ele).removeClass("passiv").addClass("active");
    }
$("#list").find("li").each(function(){
    this.className = "all "+this.innerHTML;
});
    $("#filter").click(function(){
        var class1 = $(".filter1").find(".active").text();
        var class2 = $(".filter2").find(".active").text();
        $("#list").find("li").addClass("passiv").end().find("."+class1+"."+class2)
        .removeClass("passiv").addClass("active");
    });
    $("#reset").click(function(){
        $("#list").find("li").addClass("active").removeClass("passiv");
    });
})