JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flowers-wrap">
    <p style="font-size:12px;"><strong>Filter flowers by colour:</strong>
    </p>
    <form>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-colour" id="1" />Kartofler</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-colour" id="2" />Gulerødder</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-colour" id="3" />Løg</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-colour" id="4" />Agurker</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-colour" id="5" />Peber</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-colour" id="6" />Rødbeder</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-colour" id="7" />Selleri</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-colour" id="8" />Andre</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-colour" id="9" />Salat</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-colour" id="12" />Emballage</label>
        <br>
    </form>
    <p style="font-size:12px;"><strong>Filter flowers by size:</strong>
    </p>
    <form>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-size" id="t10" />Frasortering - sten/grus</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-size" id="t11" />Vaske</label>
        <br>
        <label style="font-size:12px;">
            <input type="checkbox" name="fl-size" id="t12" />Polere</label>
        <br>
        <label style="font-size:12px;">
            <input...

CSS

body {
    font-family:'Arial';
    color:#646464;
}
.continents-wrap {
    float:left;
    width:20%;
    margin:0 5% 0 0;
    padding:0;
}
.flowers-wrap {
    float:left;
    width:20%;
    margin:0 5% 0 0;
    padding:0;
    position:relative;
}
.flowers {
    float:left;
    width:50%;
}
.flowers div {
    float:left;
    width:90%;
    height:68px;
    line-height:68px;
    padding:0 5%;
    background:#eee;
    margin:0 0 1px;
    position:relative;
}

JavaScript

var byProperty = [], byColor = [];
		
		$("input[name=fl-colour]").on( "change", function() {
			if (this.checked) byProperty.push("[data-category~='" + $(this).attr("value") + "']");
			else removeA(byProperty, "[data-category~='" + $(this).attr("value") + "']");
		});
		
		$("input[name=fl-size]").on( "change", function() {
			if (this.checked) byColor.push("[data-category~='" + $(this).attr("value") + "']");
			else removeA(byColor, "[data-category~='" + $(this).attr("value") + "']");
		});
		
		
		$("input").on( "change", function() {
			var str = "Include items \n";
			var selector = '', cselector = '', nselector = '';
					
			var $lis = $('.flowers > div'),
				$checked = $('input:checked');	
				
			if ($checked.length) {	
			
				if (byProperty.length) {		
					if (str == "Include items \n") {
						str += "    " + "with (" +  byProperty.join(',') + ")\n";				
						$($('input[name=fl-colour]:checked')).each(function(index, byProperty){
							if(selector === '') {
								selector += "[data-category~='" + byProperty.id + "']";  					
							} else {
								selector += ",[data-category~='" + byProperty.id + "']";	
							}				 
						});					
					} else {
						str += "    AND " + "with (" +  byProperty.join(' OR ') + ")\n";				
						$($('input[name=fl-size]:checked')).each(function(index, byProperty){
							selector += "[data-category~='" + byProperty.id + "']";
						});
					}							
				}
				
				if (byColor.length) {						
					if (str == "Include items \n") {
						str += "    " + "with (" +  byColor.join(' OR ') + ")\n";					
						$($('input[name=fl-size]:checked')).each(function(index, byColor){
							if(selector === '') {
								selector += "[data-category~='" + byColor.id + "']";  					
							} else {
								selector += ",[data-category~='" + byColor.id + "']";	
							}				 
						});					
					} else {
						str += "    AND " + "with (" +  byColor.join(' OR ') +...