JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th>One<input type='text'id='search' class='search' /></th>
            <th>Two<input type='text' id='search' class='search' /></th>
            <th>Three<input type='text' id='search' class='search' /></th>
            <th>Four<input type='text' id='search' class='search' /></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
       
    </tbody>
</table>

JavaScript

$(".search").keyup( function() {

       var subTotals = [];

       $.each($("tr"), function() {

              if ($(this).is(":visible")) {

                     $(this).find("td").each( function() {

                           var n = $(this).index();

                           if (n > 2) {

                                  var cellValue = $(this).text();

                    

                                  cellValue = cellValue.replace(/\,/g,'');

                                  cellValue = parseInt(cellValue,10);

 

                                  if (isNaN(subTotals[n]) == true) {

                                         subTotals[n] = 0;

                                  }

                                  if (isNaN(cellValue) == false) {

                                         subTotals[n] = subTotals[n] + cellValue;

                                  }

                           }

                     });

              }

       });

       for (n = 0; n < subTotals.length; n++) {

              if (n > 2) {

                     $("#subTotals").show().find("td").eq(n).text(subTotals[n]);

              }

       }

});