JSFiddle - React, Tailwind, and code Playground

HTML

<div style="float:left; width:20%; position:relative;">
    <p class="margin_bottom_5"><b>Skærmstørrelse:</b>

    </p>
    <input type="checkbox" name="screen_group[]" value="18.4" id="18.4" class="cb" />&nbsp;<span class="filter_paragraphs">18,4"</span>

    <br />
    <input type="checkbox" name="screen_group[]" value="17.3" id="17.3" class="cb" />&nbsp;<span class="filter_paragraphs">17,3"</span>

    <br />
    <input type="checkbox" name="screen_group[]" value="15.6" id="15.6" class="cb" />&nbsp;<span class="filter_paragraphs">15,6"</span>

    <br />
    <input type="checkbox" name="screen_group[]" value="15.5" id="15.5" class="cb" />&nbsp;<span class="filter_paragraphs">15,5"</span>

    <br />
    <input type="checkbox" name="screen_group[]" value="15.4" id="15.4" class="cb" />&nbsp;<span class="filter_paragraphs">15,4"</span>

    <br />
    <input type="checkbox" name="screen_group[]" value="14" id="14" class="cb" />&nbsp;<span class="filter_paragraphs">14"</span>

    <br />
    <input type="checkbox" name="screen_group[]" value="13.3" id="13.3" class="cb" />&nbsp;<span class="filter_paragraphs">13,3"</span>

    <br />
    <input type="checkbox" name="screen_group[]" value="12.5" id="12.5" class="cb" />&nbsp;<span class="filter_paragraphs">12,5"</span>

    <br />
    <input type="checkbox" name="screen_group[]" value="11.6" id="11.6" class="cb" />&nbsp;<span class="filter_paragraphs">11,6"</span>

    <br />
    <input type="checkbox" name="screen_group[]" value="11" id="11" class="cb" />&nbsp;<span class="filter_paragraphs">11"</span>

    <br />
    <input type="checkbox" name="screen_group[]" value="10.1" id="10.1" class="cb" />&nbsp;<span class="filter_paragraphs">10,1"</span>

    <br />
</div>
<div style="float:left; width:25%; position:relative;">
    <p class="margin_bottom_5"><b>Brands:</b>

    </p>
    <input type="checkbox" name="brand_group[]" value="acer" id="z00196" class="cb" />&nbsp;<span class="filter_paragraphs">Acer</span>

   ...

CSS

.produkt_gruppe_div {
    float:left;
    width:16.9%;
    padding:1%;
    margin-bottom:20px;
    background:#FDFDFD;
    border-top:2px solid #EEE;
    margin-right:1.1%;
    position:relative;
    z-index:10 !important;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

JavaScript

$(document).on("change", ".cb", function () {
    ShowAvailableProducts();
    ShowAvailableFilters();
});

function ShowAvailableProducts() {
    var selectedOptions = GetSelectedCBValues();
    console.log(selectedOptions);
    $('.produkt_gruppe_div').each(function (k, div) {
        var divBrand = $(div).data("brand_name");
        var divScreen = $(div).data("screensize");
        if (selectedOptions.Screen.length >= 1 && selectedOptions.Brand.length >= 1) {
            console.log("going Insde");
            if (selectedOptions.Screen == divScreen && selectedOptions.Brand == divBrand) {
                console.log("Found");
                ShowHideProductDiv(div, true, false);
            } else {
                ShowHideProductDiv(div, false, true);
            }

        } else if (selectedOptions.Screen.length >= 1) {
            if (selectedOptions.Screen == divScreen) {
                ShowHideProductDiv(div, true, false);
            } else {
                ShowHideProductDiv(div, false, true);
            }
        } else if (selectedOptions.Brand.length >= 1) {
            if (selectedOptions.Brand == divBrand) {
                ShowHideProductDiv(div, true, false);
            } else {
                ShowHideProductDiv(div, false, true);
            }
        } else {
            ShowAllProducts();
        }
    });
}

function ShowHideProductDiv(div, show, hide) {
    if (show) $(div).show();
    if (hide) $(div).hide();

}

function ShowAllProducts() {
    $('.produkt_gruppe_div').show();
}

function GetSelectedCBValues() {
    var selectedOptions = {};
    selectedOptions.Screen = $('input[name="screen_group[]"]:checked').map(function () {
        return this.value;
    }).get();
    selectedOptions.Brand = $('input[name="brand_group[]"]:checked').map(function () {
        return this.value;
    }).get();

    return selectedOptions;
}

function ShowAvailableFilters() {
    var availableScreens = new Array();
    var availableBrands = new...