JSFiddle - React, Tailwind, and code Playground

HTML

<div class="buttons">
<a  id="showall" data-target="all" >All</a>
<a  class="showSingle" data-target="1">Div 1</a>
<a  class="showSingle selected" data-target="2">Div 2</a>
<a  class="showSingle" data-target="3">Div 3</a>
<a  class="showSingle" data-target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv">
    <a href="#" class="button3">1a</a>
    <a href="#" class="button3">1b</a>
</div>

<div id="div2" class="targetDiv">
    <a href="#" class="button3">2a</a>
    <a href="#" class="button3">2b</a>
</div>
<div id="div3" class="targetDiv">
        <a href="#" class="button3">3a</a>
        <a href="#" class="button3">3b</a>
</div>
<div id="div4" class="targetDiv">popup COMPLETE</div>

CSS

.selected {background:red;}

JavaScript

jQuery(function() {
    //jQuery('#showall').click(function(){
    //     jQuery('.targetDiv').show();
    //});
    jQuery('.buttons a').click(function() {
        $(this).addClass('selected').siblings().removeClass('selected');
        var target = $(this).data('target');
        if (target === 'all') {
            jQuery('.targetDiv').show();
        } else {
            jQuery('.targetDiv').hide();
            jQuery('#div' + target).show();
        }
    });
});