filterAble List via Javascript

filterableList.ejs

            <input type="text" id="searchUniversity" class="form-control" placeholder="HU Berlin">

      <div id="universities-container">
      <% universities.forEach(function(single) { %>
          <div class="single-university-container <%= single.title %>">
            <div class="row">
              <div class="col-md-12 col-xs-12">
                <h2><a href="/universitaeten/<%= single.title %>"><%= single.name %></a></h2>
              </div>
            </div>
            <div class="row">
              <div class="col-md-3 col-xs-12">
                <img src="/intern/universities/<%= single.logo %>" alt="Logo zu <%= single.name %>" class="img img-responsive">
              </div>
              <div class="col-md-9 col-xs-12">
                <p><%- single.infos %></p>
                <a href="/universitaeten/<%= single.title %>" title="Link zur <%= single.name %>"><button class="btn btn-primary search">Zur Hochschule</button></a>
              </div>
            </div>
          </div>
        <% }) %>
<script>
  let filterInput = document.getElementById('searchUniversity');

  filterInput.addEventListener('keyup', filterUniversities);

  function filterUniversities() {
    let filterValue = document.getElementById('searchUniversity').value.toUpperCase();

    let universities = document.getElementById('universities-container');

    let singleUniversities = universities.querySelectorAll('.single-university-container');

    for (let i = 0; i < singleUniversities.length; i++) {
      let a = singleUniversities[i].getElementsByTagName('a')[0];
      if (a.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
        singleUniversities[i].style.display = '';
        // return;
      } else {
        singleUniversities[i].style.display = 'none';
      }
    }
  }

</script>