Schuffle.js Filtering with radio buttons and checkboxes

I am currently in the process of developing a module that involves a product archive. I've chosen to implement shuffle.js for this purpose, but I've encountered some issues along the way.

My objective is to create a filtering system within shuffle.js. I have successfully implemented radio button filtering, but I'm currently facing challenges when it comes to implementing checkbox-based filtering.

Presently, I have set up the filtering using an AND operator. For example:

Filtering on: ['Swine', 'Europe', '700-999']

This approach restricts me from utilizing checkboxes effectively. For instance, if I have a checkbox for "lumen output" and I select "under 700" and "700-999," I will only receive products that match both of these criteria. However, my goal is to display products that have either "700" or "700-999" in the specified range.

my script:

      const Shuffle = window.Shuffle;
        const element = document.getElementById('product_grid');
        const sizer = element.querySelector('.js-shuffle-sizer');
        let shuffleInstance; // Define shuffleInstance at a higher scope
        const allFilters = []; // Maintain filter values

        function initializeShuffle() {
            if (shuffleInstance) {
                shuffleInstance.destroy();
            }
            setTimeout(function () {
                shuffleInstance = new Shuffle(element, {
                    itemSelector: '.product_grid_item',
                    sizer: '.js-shuffle-sizer',
                    buffer: 1,
                    filterMode: Shuffle.FilterMode.ALL,
                });

                // Add "active" class to the first item
                const firstItem = element.querySelector('.product_grid_item');
                if (firstItem) {
                    firstItem.classList.add('active');
                }
                shuffleInstance.filter(allFilters);

            // Register the event listener inside initializeShuffle
            shuffleInstance.on(Shuffle.EventType.LAYOUT, () => {
                console.log('Grid moving');
                countVisibleItems();
                 
           
            });


            }, 10);
        }
        // Add "active" class to the first item
        const firstItem = element.querySelector('.product_grid_item');
        if (firstItem) {
            firstItem.classList.add('active');
        }        
        initializeShuffle();

        function countVisibleItems() {
          // Get all elements with the class ".shuffle-item--visible"
          const visibleItems = document.querySelectorAll(".shuffle-item--visible");
          console.log(visibleItems.length);
          const resultsSpan = document.getElementById("results");
          resultsSpan.textContent = visibleItems.length;
          return visibleItems.length;
          console.log(`Number of visible items: ${visibleItemCount}`);
        }
     
      

        jQuery('input[name="region"], input[name="mounting_location"],  input[name="lumen_output"],  input[name="shuffle-filter"]').on('change', function (evt) {
            const allFilters = [];
            allFilters.length = 0; // Clear the array before populating it with new filters

            jQuery('input[name="shuffle-filter"]:checked').each(function () {
                allFilters.push(this.value);
                console.log(allFilters);
            });

            jQuery('input[name="region"]:checked').each(function () {
                allFilters.push(this.value);
                console.log(allFilters);
            });

            
            jQuery('input[name="mounting_location"]:checked').each(function () {
                allFilters.push(this.value);
                console.log(allFilters);
            });
            
            jQuery('input[name="lumen_output"]:checked').each(function () {
                allFilters.push(this.value);
                console.log(allFilters);
            });
            

            // Filter the Shuffle.js instance with the updated filter
            shuffleInstance.filter(allFilters);
        });

        $("#unselectAll").on("click", function () {
            $("input[type='radio']").prop("checked", false);
            // Clear the filter values
            console.log(allFilters);
            shuffleInstance.filter();
        });
        

        jQuery("#toggleButton").click(function () {
            var moreFiltersBox = $(".more_filters_box");
            var openSpan = $(".open");
            var closeSpan = $(".closes");
            console.log(allFilters);
            if (moreFiltersBox.width() === 0)  {
                moreFiltersBox.animate({ width: "25%" }, function () {
                    openSpan.hide();
                    closeSpan.show();
                    jQuery(".product_grid").toggleClass("open_75 closed_100");
                    moreFiltersBox.addClass("open_filter");
                    if ($(window).width() > 1024) {
                        initializeShuffle();
                    }
                    setTimeout(function() { 
                        moreFiltersBox.removeClass("filter_hidden");
                    }, 250);
                });
            } else {
                moreFiltersBox.animate({ width: "0" }, function () {
                    openSpan.show();
                    closeSpan.hide();
                    moreFiltersBox.removeClass("open_filter");
                    jQuery(".product_grid").toggleClass("open_75 closed_100");
                    if ($(window).width() > 1024) {
                        initializeShuffle();
                    }
                     setTimeout(function() { 
                        moreFiltersBox.addClass("filter_hidden");
                    }, 250);
                });
            }

          // Destroy and reinitialize Shuffle.js once, not twice
          if ($(window).width() > 1024) {
              setTimeout(function () {
                  initializeShuffle();
              }, 10);
          }
        });

So to make it easier for you to understand I made this codepen:

Codepen