JSFiddle - React, Tailwind, and code Playground

HTML

<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>

<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>

<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>

<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>
				<!-- 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 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-37 cat-23 cat-26">
			cat-30 cat-37 cat-23 cat-26
			</div>
			<div class="box  cat-27 cat-32 cat-40">
			cat-27 cat-32...

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(),
array = [upper, sole, toe, midsole];
$.each(array,function(index,val){
  if (val == 'all') {//note the value of all option has to be all
     array.splice(index,1);
   }
})
var classes = '.' + array.join('.');
$('.box').hide().filter(classes).show(); 
});