JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="name" class="search-key" placeholder="name">
        <input type="text" id="lastname" class="search-key" placeholder="lastname">
        <input type="number" id="number" class="search-key" placeholder="number">
        <p></p>
        <table id="MI6">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th> 
                <th>Number</th>
            </tr>
            <tr>
                <td id="name">James</td>
                <td id="lastname">Bond</td> 
                <td id="number">7</td>
            </tr>
            <tr>
                <td id="name">Vesper</td>
                <td id="lastname">Lynd</td> 
                <td id="number">6</td>
            </tr>
            <tr>
                <td id="name">Rene</td>
                <td id="lastname">Mathis</td> 
                <td id="number">5</td>
            </tr>
            <tr>
                <td id="name">Jamie</td>
                <td id="lastname">Bond</td> 
                <td id="number">8</td>
            </tr>
            <tr>
                <td id="name">James</td>
                <td id="lastname">Lynd</td> 
                <td id="number">14</td>
            </tr>
            <tr>
                <td id="name">Rien</td>
                <td id="lastname">Matthews</td> 
                <td id="number">5</td>
            </tr>
             <tr>
                <td id="name">James</td>
                <td id="lastname">Bond</td> 
                <td id="number">7</td>
            </tr>
            <tr>
                <td id="name">Vesper</td>
                <td id="lastname">Lynd</td> 
                <td id="number">6</td>
            </tr>
            <tr>
                <td id="name">Rene</td>
                <td id="lastname">Mathis</td> 
                <td id="number">5</td>
            </tr>
            <tr>
                <td id="name">Jamie</td>
                <td id="lastname">Bond</td> 
                <td...

JavaScript

$(document).ready(function(){
            table = $("#MI6"); //set table name
            search_field = new Object();
            ///we create it as an object, initially empty
            $('.search-key').on('change keyup paste', function () {
                search_field['name']      = $( "#name" ).val();
                search_field['lastname']  = $("#lastname").val();
                search_field['number']    = $("#number").val();
                
                table.find('tr').each(function () {
                    current_row = $(this); //keep track of the row being checked, iterate through it's cells
                    var display = 0;
                    current_row.show();
                    $(this).find('td').each(function() {
                    //when we stumble upon the data used as a search criteria
                        cell_value = $(this).html(); //gets the value of the cell being checked
                        if (cell_value.localeCompare(search_field[this.id]) >=0  || search_field[this.id] == '') {
                            display++;    
                        }
                    });
                    if (display < 3) {
                        current_row.hide(); //if this cell is a match, or we no longer want to use it as a search criteria, the row is displayed
                    }
                });
                
            });   
        });