фильтр на javascript

Есть элементы фильтра:

<div class="filter__show-filter-block">
                        <div class="filter__show-filter-item">
                            <span class="filter__show-filter-item-like">
                                <i class="fa fa-heart-o" aria-hidden="true"></i>
                            </span>
                            <span class="filter__show-filter-item-title">курица</span>
                            <span class="filter__show-filter-item-delete">
                                <i class="fa fa-times" aria-hidden="true"></i>
                            </span>
                        </div>
                        <div class="filter__show-filter-item">
                            <span class="filter__show-filter-item-like">
                                <i class="fa fa-heart-o" aria-hidden="true"></i>
                            </span>
                            <span class="filter__show-filter-item-title">авокадо</span>
                            <span class="filter__show-filter-item-delete">
                                <i class="fa fa-times" aria-hidden="true"></i>
                            </span>
                        </div>
                        <div class="filter__show-filter-item">
                            <span class="filter__show-filter-item-like">
                                <i class="fa fa-heart-o" aria-hidden="true"></i>
                            </span>
                            <span class="filter__show-filter-item-title">сыр</span>
                            <span class="filter__show-filter-item-delete">
                                <i class="fa fa-times" aria-hidden="true"></i>
                            </span>
                        </div>
                    </div>

Есть верстка товаров:

<ul class="products">

<li class="product">
    <a><img><div class="woocommerce-product-details__short-description">
    <p>215 г<br>
Мидии, сливочный сыр, твердые сорта сыров, кунжут, соус «майонезно-чесночный», рис.</p>
</div>
</a><div class="cat_center"><h2>Калифорния</h2><span class="cat_vopros">?</span></div><div class="cat_bott">
    <span class="price"><span>10,00<span>₽</span></span></span>
<a>В корзину</a><div class="cat_bott"></div></div>
</li>

<li class="product">
    <a><img><div class="woocommerce-product-details__short-description">
    <p>215 г<br>
Авокадо, перец болгарский, огурец, салат «Айсберг», рис, нори</p>
</div>
</a><div class="cat_center"><h2>Калифорния</h2><span class="cat_vopros">?</span></div><div class="cat_bott">
    <span class="price"><span>10,00<span>₽</span></span></span>
<a>В корзину</a><div class="cat_bott"></div></div>
</li>

<li class="product">
    <a><img><div class="woocommerce-product-details__short-description">
    <p>215 г<br>
Тигровые креветки, авокадо, икра летучей рыбы, майонез, рис, нори.</p>
</div>
</a><div class="cat_center"><h2>Калифорния</h2><span class="cat_vopros">?</span></div><div class="cat_bott">
    <span class="price"><span>10,00<span>₽</span></span></span>
<a>В корзину</a><div class="cat_bott"></div></div>
</li>

</ul>

Нужно сделать так что бы при клике по элементу фильтра, фильтровались товары (изменялась верстка товаров, показывались подходящие товары). Делал так, но почему то получаю пустой блок products:

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery(".filter__hide").addClass("f_active");
    });
    jQuery(".filter__hide-item img").click(function(){
        jQuery(".filter__show").addClass("f_active");
        jQuery(".filter__hide").removeClass("f_active");
    });
    jQuery(".filter__show-filter-item-close img").click(function(){
        jQuery(".filter__show").removeClass("f_active");
        jQuery(".filter__hide").addClass("f_active");
    });
</script>


<script type="text/javascript">
    var array_f = []; // массив выбранных элементов фильтра
    jQuery(".filter__show-filter-item-like i").click(function(){
        jQuery(this).toggleClass("like_active");
        if(jQuery(this).hasClass("like_active")){
            jQuery(this).removeClass("fa-heart-o");
            jQuery(this).addClass("fa-heart");
            jQuery(this).parents(".filter__show-filter-item").find(".filter__show-filter-item-title").addClass("title-color");
            var item = jQuery(this).parents(".filter__show-filter-item").find(".filter__show-filter-item-title").text();
            array_f.push(item); // добавляем в массив выбранные элементы фильтрации
            console.log(array_f);
        };
        if(!jQuery(this).hasClass("like_active")){
            jQuery(this).addClass("fa-heart-o");
            jQuery(this).removeClass("fa-heart");
            jQuery(this).parents(".filter__show-filter-item").find(".filter__show-filter-item-title").removeClass("title-color");
            var item = jQuery(this).parents(".filter__show-filter-item").find(".filter__show-filter-item-title").text();
            array_f.splice( jQuery.inArray(item,array_f) ,1 ); // удаляем с массива элементы фильтрации
            console.log(array_f);
        }
        prodShow();
    });



    jQuery(".filter__show-filter-item-delete i").click(function(){
        jQuery(this).parents(".filter__show-filter-item").find(".filter__show-filter-item-like i").removeClass("like_active");
        jQuery(this).parents(".filter__show-filter-item").find(".filter__show-filter-item-like i").removeClass("fa-heart");
        jQuery(this).parents(".filter__show-filter-item").find(".filter__show-filter-item-like i").addClass("fa-heart-o");
        jQuery(this).parents(".filter__show-filter-item").find(".filter__show-filter-item-title").removeClass("title-color");
        var item = jQuery(this).parents(".filter__show-filter-item").find(".filter__show-filter-item-title").text();
            array_f.splice( jQuery.inArray(item,array_f) ,1 ); // удаляем с массива элементы фильтрации
            console.log(array_f);
        prodShow();
    });


    function prodShow(){

        const main_products = document.querySelector('.products');

        const products = document.querySelectorAll('.product');

        products.forEach(product => {
          const words = product.innerText.split(', ');
          let find_node = null;
          
          for (let i = 0; i < words.length; i++) {
            if (array_f.includes(words[i].toLowerCase())) {
              find_node = product;
              break;
            }

          }
          
          product.remove();
          
          if (find_node) {
            main_products.appendChild(find_node);
          }
        });
        console.log(main_products);
    }

</script>