фильтрация элементов через checkbox'ы, js

В html вывожу чекбоксы с нужными параметрами:

{% for brand in brands %}

 <p><label><input class="brand" name="{{brand}}" type="checkbox">{{brand.name}}</label></p>

{% endfor %}
<button type="button" class="btn btn-danger">Применить</button>

далее перечисляю блоки, которые нужно отфильтровать:

{% for product in products %}
    <div class="block-product-main" id="{{product.id}}" brand="{{product.brand}}">
    </div>
{% endfor %}

В js пытаюсь по клику принять значение чекбоксов и отфильтровать блоки оп принципу наличия поля brand:

$('.btn-danger').on('click', function(e){
    let brands = document.querySelectorAll('.brand');
    console.log(brands)
    let products = document.querySelectorAll('.block-product-main');
    let check_brand = [];
    for(i in brands){
        if(brands[i].checked){
            check_brand.push(brands[i].name);
        }
    }
    for(i in products){
        if(jQuery.inArray(products[i].brand, check_brand) == -1){
            products[i].style.display = 'none';
        }
    }

})

В js опыт 0, но как-то реализовать надо... буду очень благодарен за помощь!