JSFiddle - React, Tailwind, and code Playground

HTML

<div class="filterList">
			<h4>Style</h4>
			<ul>
				<li><input type="checkbox" name="style" value="cowl">&nbsp;Cowl/Loop</li>
				<li><input type="checkbox" name="style" value="straight">&nbsp;Straight</li>
			</ul>
			<h4>Cost</h4>
			<ul>
				<li><input type="checkbox" name="cost" value="10to19">&nbsp;&pound;10 - &pound;19.99</li>
				<li><input type="checkbox" name="cost" value="20plus">&nbsp;&pound;20 - &pound;29.99</li>
				<li><input type="checkbox" name="cost" value="20plus">&nbsp;&pound;30 - &pound;39.99</li>
				<li><input type="checkbox" name="cost" value="20plus">&nbsp;&pound;40 +</li>
			</ul>
			<h4>Gender</h4>
			<ul>
				<li><input type="checkbox" name="gender" value="ladies">&nbsp;Ladies'</li>
				<li><input type="checkbox" name="gender" value="mens">&nbsp;Men's</li>
			</ul>
			<h4>Age</h4>
			<ul>
				<li><input type="checkbox" name="age" value="baby">&nbsp;Baby</li>
				<li><input type="checkbox" name="age" value="child">&nbsp;Child</li>
				<li><input type="checkbox" name="age" value="adult">&nbsp;Adult</li>
			</ul>
			<h4>Type</h4>
			<ul>
				<li><input type="checkbox" name="type" value="clothing">&nbsp;Clothing</li>
				<li><input type="checkbox" name="type" value="accessory">&nbsp;Accessory</li>
				<li><input type="checkbox" name="type" value="homeware">&nbsp;Homeware</li>
				<li><input type="checkbox" name="type" value="jewellery">&nbsp;Jewellery</li>
				<li><input type="checkbox" name="type" value="kit">&nbsp;DIY Kit</li>
			</ul>
			<h4>Material</h4>
			<ul>
				<li><input type="checkbox" name="material" value="merino">&nbsp;Merino Wool</li>
				<li><input type="checkbox" name="material" value="accessory">&nbsp;Wool</li>
				<li><input type="checkbox" name="material" value="homeware">&nbsp;Mohair</li>
				<li><input type="checkbox" name="material" value="jewellery">&nbsp;Acrylic</li>
				<li><input type="checkbox" name="material" value="silk">&nbsp;Silk</li>
				<li><input type="checkbox" name="material"...

CSS

li {width:50%;display:inline;}
img{max-width:100%;}
.prod{width:25%;display:inline-block;}

JavaScript

$(document).ready(function() {
    var allSelectedClasses;
    allSelectedClasses = '';
    $('input[type="checkbox"]').click(function(){
        //ensure the correct classes are added to the running list
        if(this.checked){
            allSelectedClasses += '.' + $(this).val();
        }else{
            allSelectedClasses = allSelectedClasses.replace($(this).val(), '');
        }        
        //format the list of classes
        allSelectedClasses = allSelectedClasses.replace(' ', '');
        allSelectedClasses = allSelectedClasses.replace('..', '.');
        var selectedClasses;
        var allSelected;
        allSelected = '';
        
        //format these for the jquery selector
        selectedClasses = allSelectedClasses.split(".");
        for(var i=0;i < selectedClasses.length;i++){
            var item = selectedClasses[i];
            if(item.length > 0){
                if(allSelected.length == 0){
                    allSelected += '.' + item;
                }else{
                    allSelected += ', .' + item;
                }
            }
        }
        //show all divs by default
        $("div.prodGrid > div").show();
        //hide the necessary ones, include the 2 top level divs to prevent them hiding as well
        if(allSelected.length > 0){
            $("div.prodGrid > div:not(" + allSelected + ")").fadeOut(1000);
        }
    });
});