JSFiddle - React, Tailwind, and code Playground

by Mick Harner

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="optionDiv">
    Filter by Category
    <select id="selectCat">
        <option value="NoCategory">NoCategory</option>
        <option value="First_Name">First_Name</option>
        <option value="Surname" selected>Surname</option>
        <option value="Address">Address</option>
    </select>
    Filter by Selected Category
    <select id="selectField">
        <option value="All" selected>All</option>   
        <option value="O'Reilly">O'Reilly</option>
    </select>
</div>  
<table id="myTable">
    <thead> 
        <tr id=HeadRow><th>First_Name</th><th>Surname</th><th>Address</th><th>ID</th></tr>                      
    </thead>  
    <tbody> 
        <tr><td>Michael</td><td>O'Reilly</td><td>581 Beech Street, Lincoln, NE 68506</td><td>246</td></tr><tr><td>Della</td><td>Austin'</td><td>376 Washington Street, Pompano Beach, FL 33060</td><td>247</td></tr><tr><td>Hector</td><td>Hopkins</td><td>442 College Street, East Brunswick, NJ 08816</td><td>248</td></tr><tr><td>Terrance</td><td>Garza'</td><td>737 Route 1, Mahwah, NJ 07430</td><td>249</td></tr><tr><td>Melvin</td><td>Boyd'</td><td>525 Olive Street, Derby, KS 67037</td><td>250</td></tr><tr><td>Kimberly</td><td>Alvarez'</td><td>269 Olive Street, Redondo Beach, CA 90278</td><td>251</td></tr><tr><td>Eleanor</td><td>Steele'</td><td>447 Canal Street, Goose Creek, SC 29445 </td><td>252</td></tr><tr><td>Elsa</td><td>Osborne'</td><td>894 Pheasant Run, Pottstown, PA 19464</td><td>253</td></tr><tr><td>Cameron</td><td>Huff'</td><td>416 Parker Street, Riverdale, GA 30274</td><td>254</td></tr><tr><td>Essie</td><td>Ray'</td><td>539 Devon Court, Woodhaven, NY 11421</td><td>255</td></tr><tr><td>I'Am</td><td>TheBest</td><td>MyStreet 75</td><td>256</td></tr><tr><td>Bilbo</td><td>Baggins</td><td>Shire</td><td>257</td></tr><tr><td>Larry</td><td>I'Connol</td><td>Larrys's Street...

JavaScript

function addRemoveClass(theRows){

    theRows.removeClass("odd even");
    theRows.filter(":odd").addClass("odd");
    theRows.filter(":even").addClass("even");

}   

var selVal='';

var rows=$('#myTable tbody tr');

addRemoveClass(rows);


$("#selectField").on("change",function() {
    $('table').show();
    var selection = $(this).val();
    var dataset = $('#myTable tbody').find('tr');
    var selVal = $('#selectCat').val();  // Mick added this
    dataset.show();
    // filter the rows that should be hidden
    if(selVal!="All"){  // Mick added this
    // if(selection!="All"){  // Mick removed this
        console.log(selection+' & '+selVal);  // Mick added this
        // Mick says no escaping needed
        //selection=selection.replace(/'/g, '"');
        //selection = selection.replace(/'/g, "\\'");
        if(selVal==="First_Name"){
            dataset.filter(function(index, item) {
            //return $(item).find('td:nth-child(1)').text().split(',').indexOf(selection) === -1;
            return $(item).find('td:nth-child(1)').text().indexOf(selection) === -1;
            }).hide();
        } else if(selVal=="Surname"){
            dataset.filter(function(index, item) {  
            console.log(index+' & '+item+' & '+selection);  // Mick added this
            return $(item).find('td:nth-child(2)').text().indexOf(selection)=== -1;
            }).hide();
        }
        else if(selVal==="Address"){
            dataset.filter(function(index, item) {
            return $(item).find('td:nth-child(3)').text().indexOf(selection) === -1;
            }).hide();
        }else{
            dataset.show();
        }
    } else{
        dataset.show();     
    }
});



$("#selectCat").on("change",function(){
    var e = document.getElementById("selectCat");
    var strUser = e.options[e.selectedIndex].value;
    selVal=strUser;
    $("#selectField").empty();
    //$("#mytBody tr").empty();
    var selected = this.value;
    if(selected !="NoCategory"){
    ...