JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="filter-desk" id="selectMe-desk">
  <li class="category-1"><a class="active" href="#" data-page="category-1">Partners</a></li>
  <li class="category-2"><a class="" href="#" data-page="category-2">Consultants</a></li>
  <li class="category-3"><a class="" href="#" data-page="category-3">PA's</a></li>
</ul>

<ul class="category-1 group">    
    <li class="name">JOHN Smithe QC</li>
    <li class="call">DDI <span>09 333 45335</span></li>
    <li class="call">MOB <span>027 545 69873</span></li>
    <li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
<ul class="category-3 group">
    <li class="name">Barry White</li>
    <li class="call">DDI <span>021 487 5896</span></li>
    <li class="call">MOB <span>024 387 9854</span></li>
    <li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
<ul class="category-2 group">
    <li class="name">Peter Pan</li>
    <li class="call">DDI <span>231234</span></li>
    <li class="call">MOB <span>234234</span></li>
    <li><a href="mailto:23423423423">23423423423</a></li>
</ul>

CSS

.active{
    color:red;
}

JavaScript

$(function() {
    var curPage = "";
    $("#selectMe-desk li a").click(function(e) {
        var $a = $(this);
        $(".filter-desk .active").removeClass("active");
        $a.addClass("active");
        curPage = $a.data("page");
        $(".group").hide().filter("."+curPage).show();
    });
});