JSFiddle - React, Tailwind, and code Playground

HTML

<select name="attorneyFilter" id="attorneyFilter">
                    <option value="all">All</option>
                    <option value="bcr">Bankruptcy &amp; Creditor Rights</option>
                    <option value="bot">Business Organizations &amp; Tax</option>
                    <option value="dpl">Dental Practice Law </option>
                    <option value="drfl">Domestic Relations &amp; Family Law</option>
                    <option value="environ">Environmental</option>
                    <option value="bfsp">Business &amp; Family Succession Planning</option>
                    <option value="pph">Professional Practices &amp; Healthcare</option>
                    <option value="ler">Labor &amp; Employment Relations</option>
                    <option value="lit">Litigation</option>
                    <option value="mpl">Municipal/Public Law</option>
                    <option value="ebe">Employee Benefits/ERISA</option>
                    <option value="pi">Personal Injury</option>
                    <option value="pep">Probate &amp; Estate Planning</option>
                    <option value="re">Real Estate</option>
                    <option value="wc">Workers' Compensation </option>
                    <option value="ma">Mergers &amp; Acquisitions</option>
                </select>
<div id="attorneyBlocks">
                                                                        <div class="ler-7, lit-12, mpl-5, wc-4"><a href="http://wickens.pageonewebsolutions.com/our-people/attorneys/amy-l-deluca-esq/">Amy L. DeLuca, Esq.                    </a></div>
                                                        <div class="ler-4, lit-7, wc-2"><a href="http://wickens.pageonewebsolutions.com/our-people/attorneys/christine-m-faranda-esq/">Christine M. Faranda, Esq.                    </a></div>
                                                        <div class="lit-3"><a...

JavaScript

$('#attorneyFilter').change(function() {
    var selectedArea = $(this).val();
    //sort alphabetically when "all" is selected
    if (selectedArea == 'all') {
        $('#attorneyBlocks div').show();
        myArray.sort(function(a,b) {
            return $(a).text() > $(b).text() ? 1 : -1;
        });
    //filter attorneys based on practice area and then assign its order# to the div with data, getting all values from the div's class
    } else {
        $('#attorneyBlocks div').hide().each(function() {
            var attorneyArea = $(this).attr('class').split(', ');
            for (var i=0;i<attorneyArea.length;i++) {
                var practiceArea = attorneyArea[i].split('-');
                if (selectedArea == practiceArea[0]) {
                    $(this).show().data('order',practiceArea[1]);
                }
            }
        });
        
        //sort based on order, the lower the number the higher it shows up
        var myArray = $('#attorneyBlocks div').get();
        var $list = $('#attorneyBlocks div').detach().toArray();
    
        $list.sort(function(x, y) {
            return $(x).data('order') - $(y).data('order');
        });
        $('#attorneyBlocks').append($list);
    }
});