JSFiddle - React, Tailwind, and code Playground

by each

HTML

<div id="sort">
    <a href="#" class="AE">A-E</a>
    <a href="#" class="FJ">F-J</a>
    <a href="#" class="KP">K-P</a>
    <a href="#" class="QU">Q-U</a>
    <a href="#" class="VZ">V-Z</a>
</div>

<ul id="list">
    <li class="A">Alpha</li>
    <li class="B">Bravo</li>
    <li class="C">Charlie</li>
    <li class="D">Delta</li>
    <li class="E">Echo</li>
    <li class="F">Foxtrot</li>
    <li class="G">Golf</li>
    <li class="H">Hotel</li>
    <li class="I">India</li>
    <li class="J">Juliett</li>
    <li class="K">Kilo</li>
    <li class="L">Lima</li>
    <li class="M">Mike</li>
    <li class="N">November</li>
    <li class="O">Oscar</li>
    <li class="P">Papa</li>
    <li class="Q">Quebec</li>
    <li class="R">Romeo</li>
    <li class="S">Sierra</li>
    <li class="T">Tango</li>
    <li class="U">Uniform</li>
    <li class="V">Victor</li>
    <li class="W">Whiskey</li>
    <li class="X">X-ray</li>
    <li class="Y">Yankee</li>
    <li class="Z">Zulu</li>
</ul>

JavaScript

$(function() {

    var li = $('#list li'),
        a  = $('#sort a');
    
    li.hide();
    
    a.click(function(e) {
        
        e.preventDefault();
        
        var sort = $(this).attr('class').split('')

        li.hide().filter('.'+sort[0]).show().nextUntil('.'+sort[1]).show().next().show();
        
    });
    
});