JSFiddle - React, Tailwind, and code Playground

by El Khal

HTML

<input checked="cheked" type="checkbox" value="Bangalore">Bangalore</>
<input checked="cheked" type="checkbox" value="Mumbai">Mumbai</>
<table class="content">
</table>

CSS

.content td{
    border: 1px solid orange;
    
}

JavaScript

var d;
    // location array value accessed and passed to ajaxcall
    // ajax call to processresult.php
    // Displaying the DB returned Data
d = [
		{ tag:'A', city:'Mumbai',    num:18, state:'Maharashtra' },
		{ tag:'B', city:'Delhi',     num:16, state:'Delhi'       },
		{ tag:'C', city:'Hyderabad', num:7,  state:'Telangana'   },
		{ tag:'D', city:'Ahmedabad', num:6,  state:'Gujarat'     },
		{ tag:'E', city:'Mumbai',    num:18, state:'Maharashtra' },
		{ tag:'F', city:'Bangalore', num:8,  state:'Karnataka'   },
		{ tag:'G', city:'Hyderabad', num:7,  state:'Telangana'   },
		{ tag:'H', city:'Ahmedabad', num:6,  state:'Gujarat'     },
		{ tag:'J', city:'Ahmedabad', num:6,  state:'Gujarat'     },
		{ tag:'K', city:'Delhi',     num:16, state:'Delhi'       },
		{ tag:'L', city:'Mumbai',    num:18, state:'Maharashtra' },
		{ tag:'M', city:'Hyderabad', num:7,  state:'Telangana'   },
		{ tag:'N', city:'Ahmedabad', num:6,  state:'Gujarat'     }
	];
	jQuery.each(d, function(i,data) {
            $("table.content").append("<tr class=\""+data.city+"\"><td>" + data.tag + "</td><td>" + data.city + "</td><td>" + data.num + "</td><td>" + data.state + "</td></tr>");
    });
$(':checkbox').change(function () {  
    
    
    if( $(this).is(':checked') ){
        $( 'tr.'+$(this).val() ).show();
    }else{
        $( 'tr.'+$(this).val() ).hide();
    }
        
});