Функция смены свойства css элемента в jquery работает на одной странице, но не работает на второго, при этом все плагины работают на обеих

$(function () {


; (function ($D) {
    var $button = $D.querySelector('.aside__products-title filter'),
        $container = $D.querySelector('.aside__drop-down filter');

    $button.addEventListener('click', function (e) {
        var data = e.target.dataset,
            toggleText = $button.innerHTML,
            isVisible = $container.style.display == 'block';
        $container.style.display = isVisible ? 'none' : 'block';
    });
})(document);

   <!-- этот код был использован также для других элементов с другими классами, с первой странице и они работают -->

});

.aside__drop-down.filter {
        display: none;
        li {
            padding-left: 23px;
            a {
                position: relative;
            }
            a::before {
                content: "";
                top: 3px;
                left: -23px;
                width: 10px;
                height: 10px;
                background-image: url(../images/icons/Ellipse.png);
                position: absolute;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
            }
        }
    }

<div class="products__aside-wrapper">
<div class="aside__products-title filter">Filter Products<svg class="create__chevron lnr-chevron">
        <use xlink:href="#lnr-chevron-down"></use>
    </svg></div>
<div class="aside__drop-down filter">
    <ul>
        <li><a href="#">Trending Products</a></li>
        <li><a href="#">Popular Products</a></li>
        <li><a href="#">New Products</a></li>
        <li><a href="#">Best Seller</a></li>
        <li><a href="#">Best Rating</a></li>
        <li><a href="#">Low Price</a></li>
        <li><a href="#">High Price</a></li>
    </ul>
</div>
</div>