JSFiddle - React, Tailwind, and code Playground

by Earl1234

HTML

<select id="genre" name="genre">
          <option value="">Select Genre</option>
        <option value="modern">Modern</option>
        <option value="impressionist">Impressionist</option>
    </select>
    
    <select id="size" name="size">
      <option value="">Select Size</option>
      <option value="small">Small</option>
      <option value="medium">Medium</option>
      <option value="large">Large</option>
    </select>


  <div id="paintings">
      <div class="eaPaintDiv impressionist medium" >
      </div>
 
      <div class="eaPaintDiv modern medium">
      </div>
    
      <div class="eaPaintDiv impressionist large">
      </div>
    
      <div class="eaPaintDiv impressionist small">
      </div>
       
      <div class="eaPaintDiv impressionist medium" >
      </div>
 
      <div class="eaPaintDiv modern medium">
      </div>
    
      <div class="eaPaintDiv impressionist large">
      </div>
    
      <div class="eaPaintDiv impressionist small">
      </div>
      
      <div class="clr"></div>
    </div>
</div>

CSS

#paintings {
    width: 430px; 
    background-color:  #F00;
}
.eaPaintDiv  {
    display: block;
    float: left;
    margin: 3px;
    height: 100px;
    width: 100px;
    background-color: #000;
}
.clr  {
    clear: both;
}

JavaScript

$(document).ready(function() {
    $("#genre").change(function() {
        var selGenre = $(this).val();
        var selSize = $("#size").val();
        $("#paintings").slideUp(function() {
            $('.eaPaintDiv').not('.eaPaintDiv.[class*=' + selGenre + ']').hide();
            $('.eaPaintDiv[class*=' + selGenre + '][class*=' + selSize + ']').show();
            $("#paintings").slideDown();
        });
    });
    $("#size").change(function() {
        var selGenre = $("#genre").val();
        var selSize = $(this).val();
        $("#paintings").slideUp(function() {
            $('.eaPaintDiv').not('.eaPaintDiv.[class*=' + selSize + ']').hide();
            $('.eaPaintDiv[class*=' + selSize + '][class*=' + selGenre + ']').show();
            $("#paintings").slideDown();
        });
    });
});