I found this previous thread, which is EXACTLY what I need but for some reason I can’t get it to work.
Javascript to Search In Multiple Tables in same page
I copied the code exactly from this jsfiddle (http://jsfiddle.net/690713m4/1/) to an entirely new page just to eliminate any bonehead errors I was potentially making and it still will not work like it does in the jsfiddle
Here is the code :
<html>
<script sec="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script srt="https://code.jquery.com/jquery-3.3.1.js"></script>
<body><div class="input-group">
<input class="form-control" id="search" type="text">
</div>
<table id="table" class="table paginated table-hover no-wrap">
<tr><td>PHP</td></tr>
<tr><td>C#</td></tr>
<tr><td>Javascript</td></tr>
<tr><td>Jquery</td></tr>
<tr><td>SQL</td></tr>
</table>
<br><br>
<div class="input-group">
<input class="form-control" id="search2" type="text">
</div>
<table id="table2" class="table paginated table-hover no-wrap">
<tr><td>Bootstrap</td></tr>
<tr><td>Java</td></tr>
<tr><td>C++</td></tr>
<tr><td>Pyton</td></tr>
<script>var $rows = $('#table tbody tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
var $rows2 = $('#table2 tbody tr');
$('#search2').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows2.show().filter(function() {
var text = $(this).text().replace(/s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});</script>
</table>
</body>
</html>