динамически фильтровать список для каждого списка

Question

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

function FilterPret() {
// Declare variables
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('pretfilter');
filter = input.value.toUpperCase();
ul = document.getElementById("filter-ul-pret");
li = ul.getElementsByTagName('li');

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

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

Обновление: Html

<aside class="sidebar-tag filter tags shop by price ">
  <div class="widget">
     <h4>
      <span>Duritate </span>
      <a href="javascript:void(0)" class="clear" style="display:none">
      <i class="fas fa-times"></i>
      </a>
    </h4>
 <div class="widget-content">
  <input type="text" id="duritatefilter" class="myfilterinput" onkeyup="FilterPret()" placeholder="Cauta duritatea">
 <ul class="scroll-basic">
  <li><label for="val1">
   <input type="checkbox" id="val1" value="100-300"><span>Moale</span></label>
  </li>
  <li><label for="val1"><input type="checkbox" id="val1" value="100-300">
      <span>Mediu</span></label>
  </li>
  <li><label for="val1"><input type="checkbox" id="val1" value="100-300">
   <span>Tare</span>  </label>
  </li>
 </ul>
</div>

Answer 1

Используйте разные id для каждого ul и передайте это в качестве аргумента функции FilterPret() для события keyup. Затем вместо stati c value filter-ul-pret передайте это id и соберите элементы списка.