JSFiddle - React, Tailwind, and code Playground

HTML

<div id='filters'>
        <a href='#' id ="sort">Sort</a> 
        <a href='#' id='blue'>blue</a>
        <a href='#' id='green'>green</a>
        <a href='#' id='yellow'>yellow</a>
    </div>

    <div id="box">
        <ul id="filter">
            <li class="green">Green</li>
            <li class="blue">Blue</li>
            <li class="yellow">Yellow</li>
            <li class="blue">Blue</li>
            <li class="yellow">Yellow</li>
        </ul> 
    </div>

JavaScript

$('#filters a').click(function(e){ 
    
    e.preventDefault();  
    
    var filter = $(this).attr('id'); 
    
    if (filter == "sort") {
        
        $('#box ul li').sort(asc_sort).appendTo('#filter');
    }
    else {
        
        $('#box ul li').show();  
        $('#box ul li:not(.' + filter + ')').hide(); 
    }
}); 

function asc_sort(a, b) { 
    return ($(b).text()) < ($(a).text());
}