JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th>One<input type='text' class='search' /></th>
            <th>Two<input type='text' class='search' /></th>
            <th>Three<input type='text' class='search' /></th>
            <th>Four<input type='text' class='search' /></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>row one</td>
            <td>row one</td>
            <td>row one</td>
            <td>row one</td>
        </tr>
        <tr>
            <td>row two</td>
            <td>row two</td>
            <td>row two</td>
            <td>row two</td>
        </tr>
        <tr>
            <td>row three</td>
            <td>row three</td>
            <td>row three</td>
            <td>row three</td>
        </tr>
        <tr>
            <td>row four</td>
            <td>row four</td>
            <td>row four</td>
            <td>row four</td>
        </tr>
    </tbody>
</table>

CSS

.selected{
    
    border:1px solid red;
}

JavaScript

$('.search').keyup(function(){
$("td").removeClass('selected','');
var index=$(this).index('.search')+1;
    
    $('.search').each(function(index , val){
        
        var tag=$(val).val();
       if(tag!='') $("tr td:contains("+tag+")").addClass('selected');
    
    });

});