JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Filter -->
			<div id="filter">

					<ul>
						<li><label for="upper">UPPER</label>
						<select name="" id="upper">
							<option value="all" class="all">All</option>
							<option value="cat-41">Faux leather</option><option value="cat-36">Full grain leather</option><option value="cat-42">Micro fibre</option><option value="cat-38">Nubuck leather</option><option value="cat-37">Split leather</option><option value="cat-39">Split Nubuck leather</option><option value="cat-40">Suede</option>						</select></li>
						
						<li><label for="sole">SOLE</label>
						<select name="" id="sole">
							<option value="all" class="all">All</option>
							<option value="cat-30">Dual density PU</option><option value="cat-33">PU / TPU</option><option value="cat-31">Rubber</option><option value="cat-34">Rubber / EVA</option><option value="cat-32">Rubber / PU</option><option value="cat-29">Single density PU</option>						</select></li>
						
						<li><label for="toe">TOE</label>
						<select name="" id="toe">
							<option value="all" class="all">All</option>
							
							<option value="cat-27">Composite</option><option value="cat-26">Steel</option>							
						</select></li>
						
						<li><label for="upper">MIDSOLE</label>
						<select name="" id="midsole">
							<option value="all" class="all">All</option>
								<option value="cat-24">Kevlar®</option><option value="cat-23">Steel</option>						</select></li>
					</ul>
				</div>
				<!-- Filter -->
				
			
			
			<div id="box_area">		
			
			<div class="box  cat-29 cat-39 cat-23 cat-26">
			cat-29 cat-39 cat-23 cat-26
			</div>
			<div class="box  cat-29 cat-39 cat-23 cat-26">
			cat-29 cat-39 cat-23 cat-26
			</div>
			<div class="box  cat-30 cat-37 cat-23 cat-26">
			cat-30 cat-37 cat-23 cat-26
			</div>
			<div class="box  cat-30 cat-41 cat-23 cat-26">
			cat-30 cat-41 cat-23 cat-26
			</div>
			<div class="box  cat-30 cat-41 cat-23 cat-26">
			cat-30 cat-41 cat-23 cat-26
			</div>
			<div...

CSS

#box_area
{
  width: 100%;
  float: left;
}
#box_area .box
{
  width: 49%;
  float: left;
  background: #fff;
  margin: 0 2% 22px 0;
    background:#000;
    color:#fff;
}

JavaScript

$('#filter select').change(function () {
var upper = $('#upper').val(); //these are IDs of select.
var sole = $('#sole').val();
var toe = $('#toe').val();
var midsole = $('#midsole').val(),
   
array1 = [upper, sole, toe, midsole];
        var ar =[];
            $.each(array1,function(index,val){
              if (val != 'all') {//note the value of all option has to be all
                  ar.push(val);
               }
              
            });
        if(ar.length == 0) {$('.box').show();} else {
var classes = '.' + ar.join('.');
$('.box').hide().filter(classes).show(); 
        }       
        
});