JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>
            <input type="text" name="from"/>
        </td>
        <td>
            <input type="text" name="to"/>
        </td>
        <td>
            <input type="text" name="subject"/>
        </td>
    <tr>
    <tr>
        <td>Foo</td>
        <td>Bar</td>
        <td>Foo</td>
    </tr>
    <tr>
        <td>Bar</td>
        <td>Foo</td>
        <td>Bar</td>
    </tr>
</table>

CSS

.highlight { background:yellow; }

JavaScript

$("input").change(function(e) {
    var input = $(e.currentTarget), // the input that was changed
        index = input.parent().index(), // the index of the column (note: 0-based result)
        needle = input.val().toLowerCase(), // the search term
        haystack = $("td:nth-child(" + (index+1) + ")"); // all the TDs in that column (note: css 1-based result)
    
    // now we have a much smaller stack to loop through
    haystack.each(function() {
        var td = $(this);

        if(td.text().toLowerCase().indexOf( needle) != -1)
            td.addClass('highlight');
        else
            td.removeClass('highlight');
        
    });
    
});