Javascript to Search In Multiple Tables in same page with multiple search bars

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>