Фильтр на JS

Привет, недавно я хотел сделать небольшой поиск на JS.

Принцип работы: на странице несколько блоков с различным текстом, а так же input. Когда пользователь что-то в него вводил, то JS код убирал элементы, с которыми нет совпадений.

Но код почему-то только удаляет элементы, и даже при полном совпадении они не появляются обратно.
Пожалуйста, скажите, какие ошибки в моём коде. На мой взгляд, логически, в нём всё правильно.

var 
    searchBar                   = document.getElementById('search'); // inputs
    towns                       = document.getElementsByClassName('town'); // towns
    townName                    = document.getElementsByClassName('town-name'); // names of towns

searchBar.addEventListener('keyup', function () {
    for (let i = 0; i < towns.length; i++) {
        if (searchBar.value.indexOf(townName.innerHTML) > -1) {
            towns[i].style.display = 'block';
        } else {
            towns[i].style.display = 'none';
        }
    }
});