JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tagingUL">
    <li class="class1">class1</li>
    <li class="class2">class2</li>
    <li class="class3">class3</li>
    <li class="class4">class4</li>
</ul>
<br>
<br>
<div id="emplistName">
    <ul id="Names" style="display:inline">
        <li> <span class="class1 class2 class3">
   <label>John </label>
   </span>

        </li>
        <li> <span class="class2 class3">
  <label>David</label>
  </span>

        </li>
        <li> <span class="class1 class2">
   <label>Michcle</label>
   </span>

        </li>
        <li> <span class="class1 class3">
   <label>Alex </label>
   </span>

        </li>
        <li> <span class="class4">
  <label>Shelly</label>
  </span>

        </li>
        <li> <span class="class2 class3">
   <label>Pamela</label>
   </span>

        </li>
</div>

CSS

.tagingUL {
    display: inline-table;
    float: left;
    height: auto;
    margin: 13px 0 10px;
    padding: 0;
    width: 698px;
}
.tagingUL li {
    background-color: #F6F6F2;
    border: 1px solid #CCCCCC;
    cursor: pointer;
    float: left;
    font-family: helvetica;
    font-size: 11px;
    list-style: none outside none;
    margin-left: 4px;
    margin-top: 4px;
    padding: 2px 4px;
    text-decoration: none;
    text-transform: uppercase;
    border-radius:2px;
}
.tagingUL li:hover {
    background-color: #FFF8DC;
    border: 1px solid #E0DCBF;
}

JavaScript

$("ul.tagingUL li").on("click", function () {
    var className = $(this).attr('class');
    $('#emplistName ul li span.'+className).show();
    $('#emplistName ul li span:not(.'+className+')').hide();
});