JSFiddle - React, Tailwind, and code Playground

by Emmanuel Garcia

HTML

<input type="button" id="sapphire" value="Sapphire" />
<input type="button" id="platinum" value="Platinum" />
<input type="button" id="silver" value="Silver" />



<span class="m-color">BRONZE</span>
<span class="m-color">SILVER</span>
<span class="m-color">GOLD</span>
<span class="m-color">PLATINUM</span>
<span class="m-color">SAPPHIRE</span>
<span class="m-color">EMERALD</span>
<span class="m-color">RUBY</span>
<span class="m-color">DIAMOND</span>

CSS

span{
    border: 1px solid #f00;
    padding:10px;
    visibility: visible;
}

.m-color{display:inline; visibility: visible;}

JavaScript

$('input[id=sapphire]').click( function() {
 $('span.m-color').each(function() {
        var value = $(this).text();
        if (value == "SAPPHIRE" ||  value == "PLATINUM" ||  value == "GOLD" ||  value == "SILVER" ||  value == "BRONZE") {
         
        } else {
        $(this).css('display', 'none');  }}) 
});


$('input[id=platinum]').click( function() {
 $('span.m-color').each(function() {
        var value = $(this).text();
        if (value == "PLATINUM" ||  value == "GOLD" ||  value == "SILVER" ||  value == "BRONZE") {
         
        } else {
        $(this).css('display', 'none');  }}) 
});


$('input[id=silver]').click( function() {
 $('span.m-color').each(function() {
        var value = $(this).text();
        if (value == "SILVER" ||  value == "BRONZE") {
         
        } else {
        $(this).css('display', 'none');  }}) 
});