JSFiddle - React, Tailwind, and code Playground

HTML

Asset:<br>
<select id="selector1"><option value="all">All</option><option value="Data-set 2
">Data-set 2</option><option value="Data-set 1
">Data-set 1</option><option value="Data-set 4
">Data-set 4</option></select><br>

Direction:<br>
<select id="selector2"><option value="all">All</option><option value="Stable
">Stable</option><option value="Unstable, aprox.">Unstable, aprox.</option><option value="Straight">Straight</option><option value="Curved">Curved</option><option value="Padded">Padded</option><option value="Straight">Straight</option><option value="Falling">Falling</option><option value="Uprising">Uprising</option></select><br>
<button id="butt1">Select</button><br><br>

<table id="test" class="TableStyle0" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th width="90">
<p style="text-align: center;"><strong>Code</strong></p>
</th>
<th style="text-align: center;" width="203">
<p><strong>Direction</strong></p>
</th>
<th style="text-align: center;" width="136">
<p><strong>Asset</strong></p>
</th>
<th style="text-align: center;" width="98">
<p><strong>Form</strong></p>
</th>
<th  style="text-align: center;" width="91">
<p><strong>Quota</strong></p>
</th>
<th  style="text-align: center;" width="98">
<p><strong>Target</strong></p>
</th>
<th style="text-align: center;" width="98">
<p><strong>General</strong></p>
</th>
<th  style="text-align: center;" width="98">
<p><strong>Total</strong></p>
</th>
<th style="text-align: center;" width="81">
<p><strong>Stated</strong></p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1"  colspan="9" valign="bottom" width="992">
<p style="text-align: center;"><strong>Data-set 2</strong></p>
</td>
</tr>
<tr>
<td class="col1"  valign="bottom" width="90">
<p>38.03.02</p>
</td>
<td class="col1"  valign="bottom" width="203">
<p>Stable</p>
</td>
<td class="col1"  valign="bottom" width="136">
<p>Data-set 2</p>
</td>
<td class="col1"  valign="bottom" width="98">
<p>Visible</p>
</td>
<td class="col1"  valign="bottom"...

JavaScript

$(function() {    
   $('#butt1').click(function() { 
   var filter2 = $('#selector2').val();
	$("#test td.col1").parent().show();
	if ($('#selector1').val() !== "all"){
		$("#test td.col1:contains('" + $('#selector1').val() + "')").parent().show().siblings().hide();
		$("#test td.col1:contains('" + $('#selector1').val() + "')").parent().show();
		}
		if ($('#selector2').val() !== "all"){
		$("#test tr td.col1:not(:contains(filter2))").parent().hide();
		}	
    });
  
});