JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <button type="button" id="filterTablesbtn">Filter</button>
    <button type="button" id="clearFilterbtn">Clear Filter</button>
</div>
ABC1
<table id="ABC1">
    <tr>
        <td>Test</td><td><input type="checkbox"/></td>
    </tr>
    <tr>
        <td>Test 2</td><td><input type="checkbox" /></td>
    </tr>
</table>
ABC2
<table id="ABC2">
    <tr>
        <td>Test</td><td><input type="checkbox"/></td>
    </tr>
    <tr>
        <td>Test 2</td><td><input type="checkbox" /></td>
    </tr>
</table>
ABC3
<table id="ABC3">
    <tr>
        <td>Test</td><td><input type="checkbox"/></td>
    </tr>
    <tr>
        <td>Test 2</td><td><input type="checkbox"/></td>
    </tr>
</table>

JavaScript

/*

  Author - Rudolf Naprstek
  Website - http://www.thimbleopensource.com/tutorials-snippets/jquery-plugin-filter-text-input
  Version - 1.5.3
  Release - 12th February 2014

  Thanks to Niko Halink from ARGH!media for bugfix!
 
  Remy Blom: Added a callback function when the filter surpresses a keypress in order to give user feedback

  Don Myers: Added extension for using predefined filter masks

  Richard Eddy: Added extension for using negative number
  

*/

(function($){  
  
    $.fn.extend({   

        filter_input: function(options) {

          var defaults = {  
              regex:".",
              negkey: false, // use "-" if you want to allow minus sign at the beginning of the string
              live:false,
              events:'keypress paste'
          }  
                
          var options =  $.extend(defaults, options);  
          
          function filter_input_function(event) {

            var input = (event.input) ? event.input : $(this);
            if (event.ctrlKey || event.altKey) return;
            if (event.type=='keypress') {

              var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;

              // 8 = backspace, 9 = tab, 13 = enter, 35 = end, 36 = home, 37 = left, 39 = right, 46 = delete
              if (key == 8 || key == 9 || key == 13 || key == 35 || key == 36|| key == 37 || key == 39 || key == 46) {

                // if charCode = key & keyCode = 0
                // 35 = #, 36 = $, 37 = %, 39 = ', 46 = .
         
                if (event.charCode == 0 && event.keyCode == key) {
                  return true;                                             
                }
              }
              var string = String.fromCharCode(key);
              // if they pressed the defined negative key
              if (options.negkey && string == options.negkey) {
                // if there is already one at the beginning, remove it
                if (input.val().substr(0, 1) ==...