[grigori]

Здравствуйте, на сайте есть меню категорий в которых много подкатегорий. Для быстрого поиска нужной подкатегории был сделан поиск. В каждой категории есть свой 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");
    }
  });
});