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();
        if (itemselection == '') {
            $('span.item-ii').hide();
            $('p.ptext').hide();
        } else {
            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();
});