How to display filter data combination of selected dropdowns?

I am selecting value Rabel B. from dropdown A, Alex Walter from dropdown B. If in my data if i have value Rabel B and Alex Walter it is showing all the results matching.

because I have selected value Rabel B. from dropdown A, Alex Walter from dropdown B.

Rabel B. 11 Chess 1 Day

Alex Walker 11 Cricket 1 Month

So, output should only show

Rabel B. 11 Chess 1 Day

my code :

$('#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();
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="option1">
    <option></option>
    <option>Rabel B.</option>
    <option>Josef jord</option>
    <option>David</option>
    <option>Alex</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>Rabel B.</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>Josef jord</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>David</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>Alex</td>
            <td>30</td>
            <td>Chess</td>
            <td>3</td>
            <td>Week</td>
        </tr>
    </tbody>
</table>

>Solution :

You will need to create composite filters. The problem is that your second filter overrides the first one instead of adjusting it.

$('#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, duetDate, templateName, null, status]);
}


function filterData(data) {
    if (data != '') {
        var rows = $("#shelulerData").find("tr").hide();
        for (let row of rows) {
            let shouldShow = true;
            for (let index = 0; index < data.length; index++) {
                if (data[index]) shouldShow = shouldShow && (row.children[index].innerText === data[index]);
                //console.log([should])
            }
            if (shouldShow) $(row).show();
        }
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="option1">
    <option></option>
    <option>Rabel B.</option>
    <option>Josef jord</option>
    <option>David</option>
    <option>Alex</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>