JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

<div id="left_wrapper">
	<!-- FILTERS -->
    <p><b>Brands:</b></p>
    <input type="checkbox" name="brand[]" class="cb" value="acer" /><p class="checkbox_text">Acer</p><br />
    <input type="checkbox" name="brand[]" class="cb" value="toshiba" /><p class="checkbox_text">Toshiba</p><br />
    <input type="checkbox" name="brand[]" class="cb" value="lenovo" /><p class="checkbox_text">Lenovo</p><br />
    <input type="checkbox" name="brand[]" class="cb" value="asus" /><p class="checkbox_text">Asus</p>
    
    <br /><br />
    
    <p><b>Screens:</b></p>
    <input type="checkbox" name="screen[]" class="cb" value="17" /><p class="checkbox_text">17"</p><br />
    <input type="checkbox" name="screen[]" class="cb" value="16" /><p class="checkbox_text">16"</p><br />
    <input type="checkbox" name="screen[]" class="cb" value="15" /><p class="checkbox_text">15"</p><br />
    <input type="checkbox" name="screen[]" class="cb" value="14" /><p class="checkbox_text">14"</p>
    
    <br /><br />
    
    <p><b>Processor:</b></p>
    <input type="checkbox" name="processor[]" class="cb" value="intel" /><p class="checkbox_text">Intel</p><br />
    <input type="checkbox" name="processor[]" class="cb" value="amd" /><p class="checkbox_text">Amd</p>
    
    <br /><br />
    
    <p><b>Graphics:</b></p>
    <input type="checkbox" name="grafik[]" class="cb" value="intel" /><p class="checkbox_text">Intel</p><br />
    <input type="checkbox" name="grafik[]" class="cb" value="amd" /><p class="checkbox_text">Amd</p>
    
    
</div>

<div id="right_kategori_display_wrapper">
	<!-- PRODUCTS -->
    
    <!-- Acer -->
    <div class="produkt_gruppe_div red" data-options='{"brand":"acer","screenSize":"17","processor":"intel","grafik":"intel"}'>
    	<div class="produkt_gruppe_div_inner">
        	<p>Brand: <span class="bold_white">Acer</span></p><p>Skærm: <span class="bold_white">17</span>"</p>
        </div>
    </div>
    <div class="produkt_gruppe_div red"...

CSS

/* CSS Document */
* { margin:0px; padding:0px; }
body { background:#EEE; padding-top:20px; font-family:arial; }
#container { width:80%; margin:0 auto; }
#left_wrapper { width:18%; padding:2% 1% 5% 1%; background:#FFF; float:left; position:relative; }
#right_kategori_display_wrapper { width:76%; min-height:100px; background:#FFF; float:right; position:relative; }
checkbox { display:inline; }
.checkbox_text { display:inline; margin-left:5px; font-size:12px; color:#666; }

.produkt_gruppe_div {
	float:left;
	width:23%;
	padding:1%;
	position:relative;	
}
.produkt_gruppe_div_inner { padding:10px; min-height:75px; background:#333; }
.produkt_gruppe_div p { color:#EEE; }

.red { background:#F00; }
.green { background:#0C3; }
.blue { background:#06C; }
.sand { background:#996 }

.bold_white { font-weight:bold; color:#FFF; }

JavaScript

$( '.cb' ).on( 'click', function( e ) 
    	{			
    		// If any marked checkboxes
        	if( $( 'input[type="checkbox"]:checked' ).length > 0 ) 
    		{			
    			// First, hide all products
    			$( '.produkt_gruppe_div' ).hide();
    			
    			// If both the brand & screen groups have any values			
    			if( markedGroup( 'brand' ).length > 0 && markedGroup( 'screen' ).length > 0 )
    			{
    				console.log('screen & brand');
    			
    				$( '.produkt_gruppe_div' ).each( function( index, element )
    				{
                        var div = $( this );
    					
    					// Brand
    					$.each( markedGroup( 'brand' ), function( key, value ) 
    					{						
    						if( div.data( 'options' ).brand === value  )
    						{
    							// Screen 
    							$.each( markedGroup( 'screen' ), function( key, value ) 
    							{
    								if( div.data('options').screenSize === value  )
    								{
    									div.show();
    								}
    							});
    						}
    					});					
                    });		
    			}
    			// If onlye the screen group has any values
    			else if( markedGroup( 'brand' ).length == 0 && markedGroup( 'screen' ).length > 0 )
    			{
    				console.log('screen');
    	
    				$( '.produkt_gruppe_div' ).each( function( index, element )
    				{
                        var div = $( this );
    					
    					// Screen 
    					$.each( markedGroup( 'screen' ), function( key, value ) 
    					{
    						if( div.data('options').screenSize === value  )
    						{
    							div.show();
    						}
    					});				
                    });
    			}
    			// If onlye the brand group has any values
    			else if( markedGroup( 'brand' ).length > 0 && markedGroup( 'screen' ).length == 0 )
    			{
    				console.log('Der er kun valgt brand');
    				
    				$( '.produkt_gruppe_div' ).each( function( index, element )
    				{
                        var div = $( this );
    					
    					// Brand 
    					$.each(...