JS Как сделать фильтрацию в таблице с учетом фильтра в другом столбце?

table = document.getElementById('myTable');
// Делегирование обработчика для полей ввода
table.addEventListener('input', fResultFilter);
// Назначение обработчиков для кнопок очистки
[...table.querySelectorAll('.header input + span')].forEach(function(el) {
  el.addEventListener('click', function(ev) {
    ev.target.previousElementSibling.value = '';
    ev.target.previousElementSibling.dispatchEvent(new Event('input', { bubbles: true }));
  });
});

function fResultFilter(ev) {
  // Скрытие/показ кнопок очистки
  ev.target.nextElementSibling.style.transform = (ev.target.value != '') ? 'scaleX(1)' : '';
  // Получаем все строки, кроме заголовка
  let aTRs = [...table.querySelectorAll('tr:not(.header)')];
  // Получаем значения всех полей поиска
  let aSearch = [...table.querySelectorAll('th > input')];
  // Прогоняем строки через цепочку фильтров
  aTRs.filter(function(el) {
    if (el.children[0].textContent.search(new RegExp(`${aSearch[0].value}`, 'i')) < 0) {
      el.style.display = 'none';
      return false;
    } else {
      return true;
    }
  }).filter(function(el) {
    if (el.children[1].textContent.search(new RegExp(`${aSearch[1].value}`, 'i')) < 0) {
      el.style.display = 'none';
      return false;
    } else {
      return true;
    }
  }).filter(function(el) {
    if (el.children[2].textContent.search(new RegExp(`${aSearch[2].value}`, 'i')) < 0) {
      el.style.display = 'none';
      return false;
    } else {
      // Показываем только нужные строки
      el.style.display = '';
      return true;
    }
  });
}

.header input {
  background-position: 10px 12px;
  /* Расположите значок поиска */
  background-repeat: no-repeat;
  /* Не повторяйте изображение значка */
  width: 100%;
  /* Полная ширина */
  font-size: 16px;
  /* Увеличить размер шрифта */
  padding: 10px 15px 10px 20px;
  /* Добавить немного отступов */
  border: 1px solid #ddd;
  /* Добавить серую границу */
  box-sizing: border-box;
}

.header input+span {
  position: absolute;
  right: 0px;
  bottom: 23%;
  display: inline-block;
  height: 19px;
  width: 19px;
  border: 2px solid rgba(33, 110, 243, 0.44);
  border-radius: 50%;
  background-color: #fff;
  line-height: 19px;
  text-align: center;
  transform: scaleX(0);
  transition: transform .4s ease;
  cursor: pointer;
  color: red;
}

#myTable {
  border-collapse: collapse;
  /* Свернуть границы */
  width: 100%;
  /* Полная ширина */
  border: 3px solid #ddd;
  /* Добавить серую границу */
  font-size: 18px;
  /* Увеличить размер шрифта */
}

#myTable th,
#myTable td {
  text-align: left;
  /* Выравнивание текста по левому краю */
  padding: 10px;
  /* Добавить отступ */
  vertical-align: middle;
}

#myTable th {
  position: relative;
}

#myTable tr {
  /* Добавить нижнюю границу для всех строк таблицы */
  border-bottom: 1px solid #ddd;
}

#myTable tr.header,
#myTable tr:hover {
  /* Добавить серый цвет фона для заголовка таблицы и при наведении курсора мыши */
  background-color: #f1f1f1;
}

<table id="myTable">
  <tr class="header">
    <th>Имя: <input type="text" placeholder="Поиск..."><span>×</span></th>
    <th>Страна: <input type="text" placeholder="Поиск..."><span>×</span></th>
    <th>Статус: <input type="text" placeholder="Поиск..."><span>×</span></th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Германия</td>
    <td>Город</td>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Швеция</td>
    <td>Столица</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Великобритания</td>
    <td>Столица</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Германия</td>
    <td>Гоорд</td>
  </tr>
</table>