Restrict second table filter to results of first filter? Options

[EdNerd]

I copied code from W3Schools to filter a table for the text in an input and hide all rows that don't match. The function works only on the first column - <td> element [0]. If I change that to element [1], it filters on the second column - only.

I tried to add a second input, copy the function, and rename items as required in the hopes of filtering first on the first column, and then filter any duplicate results on the second column. Unfortunately, that didn't work as planned. The hidden table rows are still there, and the second filter will unhide any previously de-selected rows if the value happens to match the second filter. If I keep going long enough, I do eventually get into my first filter results. But that's too much.

Is there an easy way to restrict the second filter function to looking at only the results of the first filter?
Maybe assign a style or such to the first results and use that as a criteria in the second filter??
Ed

Input and Table CSS:

CODE

<style>

#myInput1 {
  /* background-image: url('/css/searchicon.png'); Add a search icon to input */
  /* background-position: 10px 12px; Position the search icon */
  /* background-repeat: no-repeat; Do not repeat the icon image */
  width: 35%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}

#myInput2 {
  /* background-image: url('/css/searchicon.png'); Add a search icon to input */
  /* background-position: 10px 12px; Position the search icon */
  /* background-repeat: no-repeat; Do not repeat the icon image */
  width: 35%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}

#myTable {
  border-collapse: collapse; /* Collapse borders */
  width: 75%; /* Full-width */
  border: 1px solid #ddd; /* Add a grey border */
  font-size: 18px; /* Increase font-size */
  margin-left: 1em
}

#myTable th, #myTable td {
  text-align: left; /* Left-align text */
  padding: 12px; /* Add padding */
  border-right: 1px solid #ddd;
}

#myTable tr {
  /* Add a bottom border to all table rows */
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  /* Add a grey background color to the table header and on hover */
  background-color: #f1f1f1;
}

</style>

Inputs:

CODE

<input type="text" id="myInput1" onkeyup="myFunctionLN()" placeholder="Search for Last Name ...">
<input type="text" id="myInput2" onkeyup="myFunctionFN()" placeholder="Search for First Name ...">

Functions:

CODE

<script>
function myFunctionLN() {
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput1");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      txtValue = td.textContent ||  td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

function myFunctionFN() {
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput2");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[1];
    if (td) {
      txtValue = td.textContent ||  td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
</script>

[EdNerd]

Thank you for the answer. (Though admittedly most of it went over my head!)

I knew about marking comments - I just didn't want to make the whole thing a code block. It just made it easier to do the comments.

Thank you so much for all your help in this!!
Ed