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.S</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.S</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()
});


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

    filterData(startDate)
    filterData(duetDate)
    filterData(templateName)
    filterData(status)
}


function filterData(data) {
    if (data != '') {
        var rows = $("#shelulerData").find("tr").hide();
        rows.filter(":contains('" + data + "')").show();
    }
}