Несколько фильтров поиска в таблице HTML

Question

Мне было интересно, сможете ли вы помочь.

У меня есть таблица HTML и текстовое поле.Javascript при загрузке страницы принимает значение в текстовом поле и фильтрует таблицу.

Я хотел бы добавить второе текстовое поле и использовать его для дальнейшей фильтрации таблицы на основе значения в текстовом поле.

Я добавил новое текстовое поле и присвоил ему значение,Я добавил тот же сценарий (я думаю, что именно в этом моя проблема) и предложил посмотреть на новое поле.Теперь это выглядит так, как будто он использует только второй скрипт.

Как я могу заставить их работать и фильтровать таблицу?Есть идеи?

HTML

 <input type="hidden" id="myInput" value="3"/>
<input type="hidden" id="myInput1" value="Time"/>

JAVASCRIPT

$(document).ready(function() {
                console.log("ready");
  var input, filter, table, tr, td, i, searchFilter;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("job_table");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[3];
    if (td) {
        txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }      
  }
});

    $(document).ready(function() {
                console.log("ready");
  var input, filter, table, tr, td, i, searchFilter;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("job_table");
  tr = table.getElementsByTagName("tr");

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[3];
    if (td) {
        txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }      
  }
});

Answer 1

$(document).ready(function() {
            console.log("ready");
      var input, filter, table, tr, td, i, searchFilter;
      let input1 =  document.getElementById("myInput1");
      let filter1;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      filter1=input1.value.toUpperCase();
      table = document.getElementById("job_table");
      tr = table.getElementsByTagName("tr");
     for (i = 0; i < tr.length; i++) {
       td = tr[i].getElementsByTagName("td")[3];
       if (td) {
        txtValue = td.textContent || td.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1 || 
         txtValue.toUpperCase().indexOf(filter1) > -1) {
              tr[i].style.display = "";
            } else {
           tr[i].style.display = "none";
                   }
              }      
          }
      });