Несколько параметров фильтра, флажок, переключатели. jQuery

Question

У меня проблема с опцией фильтра, что я сделал. Сначала я объясню параметры фильтра

Параметры фильтра: - Купить или Арендовать (переключатель) - Сортировать по цене (минимум - максимум, максимум - минимум) (переключатель) - Класс продукта (кнопка-флажок) - Марка (кнопка-флажок)

Циклы продукта выглядят следующим образом:

<div class="col-12 col-sm-6 PRODUCT-item" id="<?php echo $post->ID;?>" data-BRAND="<?php echo $BRAND[0]->slug;?>" data-CLASS="<?php the_field('CLASS');?>">
    <div class="PRODUCTcard">
        <a href="<?php the_permalink();?>" title="<?php the_title();?>">
            <img src="<?php echo $featured_img_url;?>" class="card-img-top" alt="<?php the_title();?>">
        </a>
        <div class="PRODUCTcard-body">
            <h3 class="card-title blauw bold">
                <a href="<?php the_permalink();?>" title="<?php the_title();?>"><?php the_title();?></a>
            </h3>

            <?php echo 'Vanaf '. formatPrijs($defprijs_met_abo,true);?>

            <p class="PRODUCTcard-text"><?php the_field('samenvatting');?></p>

            <div class="text-center">
                <a href="<?php the_permalink();?>" title="<?php the_title();?>" class="btn btn-blauw d-block bold">Bekijk deze PRODUCT</a>
            </div>
        </div>
    </div>
</div>

Итак, это продукт l oop, следующим шагом будет выбор параметров фильтра:

<div class="col-12 col-sm-4 position-sticky" id="filteropties">
    <div class="row">
        <div class="col-12">
            <div id="toggle-filter">
                <a href="#" title="Filter / sorteren" class="filter-title upcase blauw bold">Filter / sorteer op <i class="fas fa-chevron-up"></i></a>
            </div>
        </div>
        <div class="col-6 overzicht-filter">
            <fieldset class="form-group">
                <div class="row">
                    <legend class="col-form-label pt-0 bold">Buy or rent</legend>

                    <div class="col-sm-12">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="i-buyorrent" id="buy" value="buy"
                                   checked="checked">
                            <label class="form-check-label" for="buy">
                                Buy
                            </label>
                            <span class="radiomark"></span>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="i-buyorrent" id="rent" value="rent">
                            <label class="form-check-label" for="rent">
                                Rent
                            </label>
                            <span class="radiomark"></span>
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="col-6 overzicht-filter">

            <fieldset class="form-group">
                <div class="row">
                    <legend class="col-form-label pt-0 bold">Sorteren op prijs</legend>
                    <div class="col-sm-12">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="i-sorteren" id="laagnaarhoog"
                                   value="laagnaarhoog" checked="checked">
                            <label class="form-check-label" for="laagnaarhoog">
                                Laag naar hoog
                            </label>
                            <span class="radiomark"></span>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="i-sorteren" id="hoognaarlaag"
                                   value="hoognaarlaag">
                            <label class="form-check-label" for="hoognaarlaag">
                                Hoog naar laag
                            </label>
                            <span class="radiomark"></span>
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>

    <div class="row">
        <div class="col-6 overzicht-filter">
            <fieldset class="form-group">
                <div class="row">
                    <legend class="col-form-label pt-0 bold">BRANDS</legend>
                    <div class="col-sm-12">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="i-BRANDS" id="Brand-1" data-filter="BRAND"
                                   data-BRAND="Brand-1" value="Brand-1">
                            <label class="form-check-label" for="Brand-1">
                                Brand-1 </label>
                            <span class="checkmark"></span>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="i-BRANDS" id="Brand-2"
                                   data-filter="BRAND" data-BRAND="Brand-2" value="Brand-2">
                            <label class="form-check-label" for="Brand-2">
                                Brand-2 </label>
                            <span class="checkmark"></span>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="i-BRANDS" id="Brand-3"
                                   data-filter="BRAND" data-BRAND="Brand-3" value="Brand-3">
                            <label class="form-check-label" for="Brand-3">
                                Brand-3 </label>
                            <span class="checkmark"></span>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="i-BRANDS" id="Brand-4"
                                   data-filter="BRAND" data-BRAND="Brand-4" value="Brand-4">
                            <label class="form-check-label" for="Brand-4">
                                Brand-4 </label>
                            <span class="checkmark"></span>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="i-BRANDS" id="Brand-5"
                                   data-filter="BRAND" data-BRAND="Brand-5" value="Brand-5">
                            <label class="form-check-label" for="Brand-5">
                                Brand-5 </label>
                            <span class="checkmark"></span>
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="col-6 overzicht-filter">
            <fieldset class="form-group">
                <div class="row">
                    <legend class="col-form-label pt-0 bold">CLASS Klasse</legend>
                    <div class="col-sm-12">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="i-CLASSklasse" id="CLASS 3"
                                   data-filter="klasse" data-klasse="3" value="3">
                            <label class="form-check-label" for="CLASS 3">
                                CLASS 3 </label>
                            <span class="checkmark"></span>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="i-CLASSklasse" id="CLASS 4"
                                   data-filter="klasse" data-klasse="4" value="4">
                            <label class="form-check-label" for="CLASS 4">
                                CLASS 4 </label>
                            <span class="checkmark"></span>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="i-CLASSklasse" id="CLASS 5"
                                   data-filter="klasse" data-klasse="5" value="5">
                            <label class="form-check-label" for="CLASS 5">
                                CLASS 5 </label>
                            <span class="checkmark"></span>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="i-CLASSklasse" id="CLASS 6"
                                   data-filter="klasse" data-klasse="6" value="6">
                            <label class="form-check-label" for="CLASS 6">
                                CLASS 6 </label>
                            <span class="checkmark"></span>
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>

</div>

Мой jQuery скрипт для дальнего:

    jQuery('.filteropties input[type="checkbox"]').on('change', function() {
        var filteron = $(this).data('filter');
        $('#filteropties [data-filter="'+filteron+'"]:not(:checked)').each(function(){
            var unchecked = $(this).data(filteron);
            $('.PRODUCT-item[data-'+filteron+'="'+unchecked+'"]').hide();
        });
        $('#filteropties [data-filter="'+filteron+'"]:checked').each(function(){
            var unchecked = $(this).data(filteron);
            $('.PRODUCT-item[data-'+filteron+'="'+unchecked+'"]').show();
        });

Это еще не завершено, потому что я нашел проблему. Если вы фильтруете только по БРЕНДУ, это прекрасно работает, но если вы выбираете 2 БРЕНДА и после этого выбираете КЛАСС из флажка, то выбор брендов больше не имеет значения, и он фильтрует только по КЛАССАМ. Надеюсь, вы понимаете, о чем я, может кто-то помоги мне.