JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<select id="option1">
    <option></option>
    <option>Thulasiram.S</option>
    <option>ST Ram</option>
    <option>Ram Kumar.S</option>
    <option>Dinesh Kumar.S	</option>
</select>

<select id="option2">
    <option></option>
    <option>11</option>
    <option>21</option>
    <option>30</option>
</select>

<select id="option3">
    <option></option>
    <option>Chess</option>
    <option>Cricket</option>
</select>
<select id="option4">
    <option></option>
    <option>Day</option>
    <option>Month</option>
    <option>Week</option>
</select>
<button id="test213">Add filter</button>
<table id="ticketList">
    <thead>
    </thead>
    <tbody id="shelulerData">
        <tr>
            <th>Fullname</th>
            <th>Age</th>
            <th>Sport</th>
            <th>Class </th>
            <th>Term</th>
        </tr>
        <tr class="filter-row" data-age="11" data-class="1" data-term="Day">
            <td>Thulasiram.S30</td>
            <td>11</td>
            <td>Chess</td>
            <td>1</td>
            <td>Day</td>
        </tr>
        <tr class="filter-row" data-age="11" data-class="1" data-term="Month">
            <td>ST Ram</td>
            <td>11</td>
            <td>Cricket</td>
            <td>1</td>
            <td>Month</td>
        </tr>
        <tr class="filter-row" data-age="21" data-class="2" data-term="Day">
            <td>Ram Kumar.S30</td>
            <td>21</td>
            <td>Chess</td>
            <td>2</td>
            <td>Day</td>
        </tr>
        <tr class="filter-row" data-age="30" data-class="3" data-term="Week">
            <td>Dinesh Kumar.S</td>
            <td>30</td>
            <td>Chess</td>
            <td>3</td>
            <td>Week</td>
        </tr>
    </tbody>
</table>

JavaScript

$('#test213').click(function () {
    getSelectedVal()
    filterData()
});

var filters = [];

function getSelectedVal() {
    var startDate = $('#option1 option:selected').text()
    var duetDate = $('#option2 option:selected').text()
    var templateName = $('#option3 option:selected').text()
    var status = $('#option4 option:selected').text()

    applyFilter(startDate)
    applyFilter(duetDate)
    applyFilter(templateName)
    applyFilter(status)
}

function applyFilter(value) {
if(value)
 filters.push(':contains('+value+')')
}


function filterData() {
    if (filters.length>0) {
        var rows = $("#shelulerData").find("tr").hide();
        var currentFilter = null;
        filters.forEach(filter => {
        	if(currentFilter===null) {
          	currentFilter = rows.filter(filter)
          } else
          {
          currentFilter = currentFilter.filter(filter)
          }
        })   
        currentFilter.show()
    }
}