JSFiddle - React, Tailwind, and code Playground

HTML

<div id="optionSelect">
                    <h2>Option Select</h2>
                
                    <div id="catSelect">
                        <h3>Category</h3>
                        <select size="7" id="cat">
                            <option value="cat1">Category 1</option>
                            <option value="cat2">Category 2</option>
                            <option value="cat3">Category 3</option>
                            <option value="cat4">Category 4</option>
                            <option value="cat5">Category 5</option>
                            <option value="cat6">Category 6</option>
                            <option value="cat7">Category 7</option>
                        </select>
                    </div>
                    
                    <div id="catOptSelect">
                        <h3>Category Options</h3>                    
                        <select multiple="multiple" size="7" id="catOpt">
                            <option value="catOpt1">Category Options 1</option>
                            <option value="catOpt2">Category Options 2</option>
                            <option value="catOpt3">Category Options 3</option>
                            <option value="catOpt4">Category Options 4</option>
                            <option value="catOpt5">Category Options 5</option>
                            <option value="catOpt6">Category Options 6</option>
                            <option value="catOpt7">Category Options 7</option>
                        </select>
                    </div>
                    
                    <div id="tariffSelect">
                        <h3>Tariff</h3>                    
                        <select multiple="multiple" size="7" id="tariff"> 
                            <option value="tar1">Tariff 1</option>
                            <option value="tar2">Tariff 2</option>
                            <option value="tar3">Tariff 3</option>
    ...

CSS

#optionSelect{

}

#optionSelect H3{
    margin:0;
    padding:0;
    font-size:18px;
    font-weight:normal;
    padding-bottom:10px;
}

#optionSelect #catSelect, #optionSelect #catOptSelect, #optionSelect #tariffSelect{
    float:left;
    padding-right:20px;

}

#optionSelect select {
    width: 250px;
}
#dynamicTableHolder{
margin-top:20px;
}

#dynamicTableHolder table{
    
}

#dynamicTableHolder table{
    clear: both;
    width:100%;
    border-spacing: 0;
    visibility:hidden;
}
#dynamicTableHolder table thead  tr td{
    background:#e60000;
    color:#fff;
    line-height:17px;
    padding:10px;
}

#dynamicTableHolder table tbody  tr td{
    line-height:17px;
    padding:10px;
    border-bottom: 1px solid #82786f;
}

#dynamicTableHolder table td.right{
    text-align:right;
}

.odd { background-color: #e8e2dd; border-color:#82786f;}
.even { background-color: white; border-color:#82786f;}

JavaScript

$(document).ready(function() {
    
    var selectMenuArray = ["cat", "catOpt", "tariff", "tariffOpt"], // these are the IDs of the select menus... this needs to be global between functions... not bad global)
        selObj = {}; 
        
    setUpTable(selectMenuArray, selObj);
    changeTable(selectMenuArray, selObj);
    removeTR(selectMenuArray);
    


});


function removeTR(selectMenu){

    // okay this is going to be tough..
    $("#dyTable a").live("click",  function(){ 
    
    // okay, what was clicked? Let's remove the parent TR
    $("#" + this.id).closest("tr").fadeOut(500, function(){ 
                        $("#" + this.id).closest("tr").remove();
                        });
                        
    // now unselect the item, but how do we know what menu it's from... jesus! What a pain! option[value="SEL1"]
    
        for(i=0;i<selectMenu.length;i++){
            // now for this menu match the option...
            $("#" + selectMenu[i] + ' option[value="' + this.id + '"]').removeAttr("selected");
        }
    
    return false;
    })
    
    // okay we have to check if the app. table has an empty tr... it's fucking up the color?!? if a tbody is emptz we need to add a blank <tr><tr>
    
    // here's a list of the tbodys...
    tbodyArray = ['dtCats', 'dtCatOpts', 'dtTariffs', 'dtTariffOpts'];
    
    for(i=0;i<tbodyArray.length;i++){
        //alert($("#dyTable tbody#" + tbodyArray[i] + " tr").length);
        if($("#dyTable tbody#" + tbodyArray[i] + " tr").length == 0){
            $("#dyTable tbody#" + tbodyArray[i] + " tr").append("<tr></tr>")
        }
    }
    
    changeColor();
}
function setUpTable(selectArray, theObj){

    // okay, if we enter the page and and the user already has a tarif selected (so it is shown in the menus) we wish to show the table with the 
    // default/original values...
    
    var currentSelect,
        catA = [],
        catOptA = [],
        tarA = [],
        tarOptA  = [],
       ...