How to use multiple filter lists (html-select) on one table to narrow down results without the conflicting?

Question

I'm not a programmer but attempting to create a simple academic website. I have a host of articles in a table and managed to use some javascript and select-html to create a filter that works from W3 Schools. I am attempting to add a second select-html filter to narrow results further, but seems that only the first list will work. I've tried to add additional ids to differentiate the two lists, but likely doing it wrong and not working.

What I would like to be able to do is use the first filter to keep all Author1 instances, and if you choose to use the second filter to narrow down to Category1, it will result in all Author1 and Category1 if any (in example above, just top row would remain).

function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("mylist");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

<select id="mylist" onchange="myFunction()" class='form-control' style="max-width: 250px; min-width: 250px">
  <option></option>
  <option>Author1</option>
  <option>Author2</option>
</select>

<select id="mylist" onchange="myFunction()" class='form-control' style="max-width: 250px; min-width: 250px">
  <option></option>
  <option>Category1</option>
  <option>Category2</option>
</select>


<table id="myTable" height="100%" width="100%">
  <tr>
    <td>Author1, Category1</td>
  </tr>
  <tr>
    <td>Author1, Category2</td>
  </tr>
</table>