sum to table row data when I search in my Dashboard searchbar

I want to sum the duration of all rows displayed in the table after searching the student’s name as per the image if I search ’ Abhi ’ it returns me 2 rows I want to sum of these 2 rows using javascript on the right-hand side as you see I fetch duration print in the browser console instead of returning me 2 row’s of duration it returns me all rows.

 <script>
<script type="text/javascript">
    function mySearchFunction() {
        $('#total').remove();
        $('#mybutton').remove();
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");
        // teach_dur = tr.getElementsByTagName("td");
        // console.log(teach_dur)
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            // console.log(td)
            if (td) {
                txtValue = td.textContent || td.innerText;
                // console.log(txtValue)
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                    // console.log(x)
                } else {
                    tr[i].style.display = "none";
                }
            }
        }

        var table = $("table tbody");
        table.find('tr').each(function (i, el) {
        var $tds = $(this).find('td'),
            Quantity = $tds.eq(3).text();
            console.log(Quantity)
</script>