JSFiddle - React, Tailwind, and code Playground

by JonNorman

HTML

<select name="filteritem" id="filteritem">
      <option value="">- Select One-</option>
      <option value="Feliformia">Feliformia</option>
      <option value="Caniformia">Caniformia</option>
<option value="DoesnotExist">Span Doesn't Exist</option>

<option value="PDoesNotExist">P Doesn't Exist</option>

    </select>
    
    <span class="item-ii lid-34 bigtitle">Feliformia</span>
    <span class="item-ii lid-2 bigtitle">Caniformia</span>
<span class="item-ii lid-5 bigtitle">PDoesNotExist</span>
    
    ...
    
    <p class="ptext lid-34 moderate-me">Stenoplesictidae (shown for Feliformia)</p>
    <p class="ptext lid-34 moderate-me">Percrocutidae (shown for Feliformia)</p>
    <p class="ptext lid-2 moderate-me">Amphicyonidae (shown for Caniformia)</p>
    <p class="ptext lid-2 moderate-me">Canidae (shown for Caniformia)</p>

JavaScript

$(document).ready(function() {
    $('select#filteritem').change(function() {
        var itemselection = $(this).val();

        var foundItemText = false;
        $('span.item-ii').each(function() {
            var itemtext = $(this).html();
            if (itemtext == itemselection) {
                $(this).show();
                foundItemText = true;
                var allClasses = $(this).attr("class").split(" ")
                var lidClass = '';
                for (var i = 0; i <= allClasses.length; i++) {
                    if (allClasses[i].substr(0, 4) == "lid-") {
                        lidClass = allClasses[i];
                        break;
                    }
                }
                $('p.ptext').filter('.' + lidClass).show().end().not('.' + lidClass).hide();
            } else {
                $(this).hide();
            }
        });
        if (!foundItemText) {
            $('p.ptext').hide();
        }
    }).change();
});