JSFiddle - React, Tailwind, and code Playground

by aflynt

HTML

<pre id=result> </pre>
            
			<div class="flowers-wrap">
            
                <h3 style="font-size:14px; font-weight:normal;">Available Flowers</h3>
                <p style="font-size:12px;"><strong>Filter flowers by colour:</strong></p>
                <form>
                    <label style="font-size:12px;"><input type="checkbox" name="fl-colour" value="red" id="red" /> Red</label><br>
                    <label style="font-size:12px;"><input type="checkbox" name="fl-colour" value="yellow" id="yellow" /> Yellow</label><br> 
                    <label style="font-size:12px;"><input type="checkbox" name="fl-colour" value="pink" id="pink" /> Pink</label><br>                     
                    <label style="font-size:12px;"><input type="checkbox" name="fl-colour" value="purple" id="purple" /> Purple</label><br>
                    <label style="font-size:12px;"><input type="checkbox" name="fl-colour" value="green" id="green" /> Green</label><br>  
                    <label style="font-size:12px;"><input type="checkbox" name="fl-colour" value="other" id="other" /> Other</label>
                </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" value="tiny" id="tiny" /> Tiny</label><br>
                    <label style="font-size:12px;"><input type="checkbox" name="fl-size" value="small" id="small" /> Small</label><br>
                    <label style="font-size:12px;"><input type="checkbox" name="fl-size" value="medium" id="medium" /> Medium</label><br>                  
                    <label style="font-size:12px;"><input type="checkbox" name="fl-size" value="large" id="large" /> Large</label><br>
                    <label style="font-size:12px;"><input type="checkbox" name="fl-size" value="giant" id="giant" /> Giant</label>
                </form>                
                  ...

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 = [], byLocation = [];
		
		$("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-colour]").on( "change", function() {
			if (this.checked) byProperty.push("[data-category~='red']");
			else removeA(byProperty, "[data-category~='red']");
		});*/
		
		$("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[name=fl-cont]").on( "change", function() {
			if (this.checked) byLocation.push("[data-category~='" + $(this).attr("value") + "']");
			else removeA(byLocation, "[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 ') +...