JSFiddle - React, Tailwind, and code Playground

by blashadow

HTML

<h3 data-target="#colours_filters">Colour</h3>
<ul id="colours_filters">
    <li class="filter-option"><a href="#" id='unique_1' data-tax="colours" data-filter=".tag-colours-black-2">Black</a></li>
    <li class="filter-option"><a href="#" id='unique_2' data-tax="colours" data-filter=".tag-colours-blue">Blue</a></li>
</ul>


<script>
    $(document).ready(function(){

    $('.filter-option a').on('click', function() {
        alert('ready')
        var isActived = $(this).hasClass('active') == false; 
        var id = $(this).attr('id');

        localStorage.setItem(id,isActived);

        $(this).toggleClass('active'); 
    });

    $('.filter-option a').each(function(){
        var id = $(this).attr('id');

        var hasActiveClass = localStorage.getItem("active");

        if(hasActiveClass != undefined){
            $(this).addClas('active');
        }
    });

});
    
</script>

CSS

.active{
    font-size:50px;
}