Фильтрация нескольких параметров из таблицы HTML с помощью JavaScript

Question

Я искал похожие вопросы, но я не нашел способа добавить другой параметр в поиск.

Прямо сейчас у меня есть следующий код, который имеет два ввода текста и фильтрует имена из таблицы. Мне нужно иметь второй вход, чтобы также отфильтровать результаты по стране, поэтому, если оба входа заполнены, они должны работать вместе, показывая только те результаты, где имя и страна совпадают.

Я пробовал несколько разных вещей, но я никогда не заставлял их работать. Я сделал так, чтобы оба входа работали, но один отменял противоположные результаты фильтра, поэтому они никогда не работали вместе.

Это таблица с двумя фильтрами, в которой работает только поиск по имени:

            <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
            <input type="text" id="myInput2" onkeyup="myFunction()" placeholder="Search for countries..">

            <table id="myTable">
              <tr class="header">
                <th style="width:60%;">Name</th>
                <th style="width:40%;">Country</th>
              </tr>
              <tr>
                <td>Alfreds Futterkiste</td>
                <td>Germany</td>
              </tr>
              <tr>
                <td>Berglunds snabbkop</td>
                <td>Sweden</td>
              </tr>
              <tr>
                <td>Island Trading</td>
                <td>UK</td>
              </tr>
              <tr>
                <td>Koniglich Essen</td>
                <td>Germany</td>
              </tr>
            </table>

А это сценарий

  <script>
  function myFunction() {
    // Declare variables
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("myInput");
    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";
        }
      }
    }
  }
  </script>