Javascript-форум - Поиск по тексту с нескольких input

Здравствуйте, на сайте есть меню категорий в которых много подкатегорий. Для быстрого поиска нужной подкатегории был сделан поиск. В каждой категории есть свой input. Проблема в том, что поиск работает только из первого inputa первой категории. Из второго и следующих не работает.

<ul class="parent">
 <label><span>Томская</span></label>
<ul class='children'>
 <input id='filter-input' type='text'> <i>(текст для поиска здесь)</i>
  <p class='show'>Томск</p>
  <p class='show'>Асино</p>
  <p class='show'>Молчаново</p>
  <p class='show'>Колпашево</p>
  <p class='show'>Стрежевой</p>
</ul>
<label><span>Новосибирская</span></label>
<ul class='children'>
 <input id='filter-input' type='text'> <i>(текст для поиска здесь)</i>
  <p class='show'>Новосибирск</p>
  <p class='show'>Барабинск</p>
  <p class='show'>Куйбышев</p>
  <p class='show'>Бердск</p>
  <p class='show'>Ордынское</p>
</ul>
<label><span>Кемеровская</span></label>
<ul class='children'>
 <input id='filter-input' type='text'> <i>(текст для поиска здесь)</i>
  <p class='show'>Кемерово</p>
  <p class='show'>Новокузнецк</p>
  <p class='show'>Междуреченск</p>
  <p class='show'>Прокопьевск</p>
  <p class='show'>Ленинск-Кузнецкий</p>
</ul>
</ul>
<style>
.hidden{
  display: none;
}

input{
  font-size:24px;
  margin-bottom:15px;
}

p{
  background-color: gray;
  color :white;
  font-size:18px;
  width:200px;
  padding:5px;
  margin: 3px;
}
</style>

$("body").on("keydown", "#filter-input", function() {
  var searchText =
      $("#filter-input")
  .val()
  .toLowerCase() || "___";
  $(".children > p").each(function(i) {
    var elem = $(this);
    if (
      elem
      .html()
      .toLowerCase()
      .indexOf(searchText) === -1
    ) {
      elem.addClass("hidden");
    } else {
      elem.removeClass("hidden");
    }
  });
});

<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style> .hidden{ display: none; } input{ font-size:24px; margin-bottom:15px; } p{ background-color: gray; color :white; font-size:18px; width:200px; padding:5px; margin: 3px; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).on("input", ".filter-input", function() { var searchText = this.value.toLowerCase(); $(".show", this.parentNode).each(function(i, elem) { var text = elem.textContent.toLowerCase(); var notFound = searchText && text.indexOf(searchText) === -1; elem.classList.toggle("hidden", notFound) }); }); </script> </head> <body> <ul class="parent"> <label><span>Томская</span></label> <ul class='children'> <input class='filter-input' type='text'> <i>(текст для поиска здесь)</i> <p class='show'>Томск</p> <p class='show'>Асино</p> <p class='show'>Молчаново</p> <p class='show'>Колпашево</p> <p class='show'>Стрежевой</p> </ul> <label><span>Новосибирская</span></label> <ul class='children'> <input class='filter-input' type='text'> <i>(текст для поиска здесь)</i> <p class='show'>Новосибирск</p> <p class='show'>Барабинск</p> <p class='show'>Куйбышев</p> <p class='show'>Бердск</p> <p class='show'>Ордынское</p> </ul> <label><span>Кемеровская</span></label> <ul class='children'> <input class='filter-input' type='text'> <i>(текст для поиска здесь)</i> <p class='show'>Кемерово</p> <p class='show'>Новокузнецк</p> <p class='show'>Междуреченск</p> <p class='show'>Прокопьевск</p> <p class='show'>Ленинск-Кузнецкий</p> </ul> </ul> </body> </html>