Невозможно отфильтровать элементы в JavaScript

Итак, я пытаюсь создать фильтр для этого списка магазинов, чтобы отображались только те, содержимое которых равно значению поля ввода. К сожалению, мой фильтр работает некорректно. Во-первых, все, что я набираю в поле ввода, заставляет все элементы моего магазина добавлять класс «display», что приводит к тому, что мои элементы получают стиль «display: none;». Во-вторых, он не обновляется каждый раз при нажатии клавиши.

HTML:

                 <li class = "p-3 clearfix store display">

                        <div class='float-left w-50'>

                            <div class='mb-1'><strong>Store Number:</strong><span class = "store-info">

                                <?php

                                if (strlen($row['store_num']) < 4) {

                                    if (strlen($row['store_num']) == 3) {
                                        echo '0' . $row['store_num'];
                                    } else if (strlen($row['store_num']) == 2) {
                                        echo '00' . $row['store_num'];
                                    }

                                } else {
                                    echo $row['store_num'];
                                }

                                ?>

                            </span></div>

                            <div class='mb-1'><strong>Store Name:&nbsp;</strong><span class='store-info'><?php echo $row['store_name']; ?></span></div>

                            <div class='clearfix mb-1'>


                                    <p class='float-left'><strong>Address:&nbsp;</strong></p>


                                    <span class='d-block store-info float-left'><?php echo $row['store_street']; ?></span>
                                    <br>
                                  <span class='d-block store-info float-left'><?php echo $row['store_city']; ?>,&nbsp;<?php echo strtoupper($row['store_state']); ?>&nbsp;<?php echo $row['store_zip']; ?></span>


                            </div> <!-- mb-1 -->

                        </div> <!-- float-left -->

                        <div class = "float-left w-50 clearfix">

                            <div class = "d-inline float-right">

                                <div class='mb-1'>
                                    <strong>Time Zone:&nbsp;</strong><span class='time-zone store-info'><?php echo strtoupper($row['time_zone']); ?></span>
                                </div>

                                <div class='mb-1'>
                                    <strong>Current Time:&nbsp;</strong><time>3:45pm</time>
                                </div>

                                <div class='mb-1'>
                                    <strong>Phone Number:</strong><span class='store-info'>

                                    <?php

                                        $phone = $row['store_phone'];

                                        $area = substr($phone, 0, 3);
                                        $prefix = substr($phone, 4, 3);
                                        $line = substr($phone, 6, 4);

                                        echo '(' . $area . ') ' . $prefix . '-' . $line;

                                     ?>

                                    </span>
                                </div>

                                <div class='mb-1'>
                                    <strong>Fax Number:</strong><span class='store-info'>

                                    <?php

                                        $phone = $row['store_fax'];

                                        $area = substr($phone, 0, 3);
                                        $prefix = substr($phone, 4, 3);
                                        $line = substr($phone, 6, 4);

                                        echo '(' . $area . ') ' . $prefix . '-' . $line;

                                     ?>

                                    </span>
                                </div>

                            </div> <!-- d-inline -->

                        </div> <!-- float-right -->

                    </li> <!-- clearfix -->

JavaScript:

var search = document.getElementById('search');
var stores = document.querySelectorAll('.store');

search.addEventListener('keyup', function (e) {

    var data = e.target.value.toLowerCase();

    stores.forEach(function(store) {

        var spans = document.querySelectorAll('.store-info');

        for(var i = 0; i < spans.length; i++) {
            if (spans[i].innerText.toLowerCase() != data) {
                store.classList.remove('display');
            } else {
                store.classList.add('display');
            }
        }

    });

});