JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="selector">
    <li id="brown">button 1</a>
    <li id="green">button 2</a>
    <li id="blue">button 3</a>
    <li id="orange">button 4</a>
        
</ul>
        
<ul id="tips">
    <li class="brown">text</li>
    <li class="orange">text</li>
    <li class="blue">text</li>
    <li class="blue no-right-marg">text</li>
     <li class="blue">text</li>
     <li class="orange">text</li>
     <li class="blue">text</li>
    <li class="blue no-right-marg">text</li>
    <li class="green">text</li>
</ul>

CSS

#selector li{
 width:100px;
padding:10px; 
float:left;    
}
#selector{
 margin-bottom:5px;   
    overflow:auto;
}

#tips{
    border:2px solid black;
    margin-top:20px;
 clear:both;   
    width:270px;
    overflow:auto;
}
#tips li{
 width:60px;
    margin-bottom:10px;
    
float:left;   
margin-right:10px;    
}

#tips li.no-right-marg{
 margin-right:0px;   
}

li.brown, div.brown, li#brown{background-color: #d7af38;}
li.orange, div.orange, li#orange{background-color:#f78f1e;}
li.blue, div.blue, li#blue{background-color:#8fc3ea;}
li.green, div.green, li#green{background-color:#006b51;}
li.cream, div.cream, li#cream{background-color:#fff4a0; color:#54301c;}

li.inactive {background-color: #dedede !important; color:#fff !important;}

JavaScript

jQuery('#selector li').click(function() {

    colour = '.' + jQuery(this).attr('id');
   

    jQuery('#tips ' + colour).toggle();


    jQuery(this).toggleClass('inactive');


    jQuery('#tips li').removeClass('no-right-marg');
    
    jQuery('#tips li:visible').each(function(index){
          
        if(index %4==0 ){// if divisible by 4
               jQuery(this).addClass('.no-right-marg');
            
        };            
    });

});