JSFiddle - React, Tailwind, and code Playground
HTML
<div id="prod">
<div class="content" data-brand="Andrew" data-price="1000" data-store="JCPenny">Andrew</div><br />
<div class="content" data-brand="Hill" data-price="1200" data-store="JCPenny">Hill</div><br />
<div class="content" data-brand="Andrew" data-price="2000" data-store="JCPenny">Andrew</div><br />
<div class="content" data-brand="Hill" data-price="800" data-store="SuperMart">Hill</div><br />
<div class="content" data-brand="Hill" data-price="1300" data-store="SuperMart">Hill</div><br />
<div class="content" data-brand="Andrew" data-price="800" data-store="JCPenny">Andrew</div><br />
<input type="checkbox" class="brand" id="Andrew" />Andrew
<input type="checkbox" class="brand" id="Hill" />Hill
<input type="checkbox" class="store" id="JCPenny" />JCPenny
<input type="checkbox" class="store" id="SuperMart" />SuperMart
</div>
JavaScript
var a=$("input.brand");
var b=$("input.store");
var brand=new Array();
var store=new Array();
$('input[type="checkbox"]').change(function(){
if($(this).is(":checked")){
$('#prod >div').hide();
if(this.className == "brand"){
console.debug("brand checked");
brand.push($(this).attr('id'));
}else if(this.className == "store"){
console.debug("store checked");
store.push($(this).attr('id'));
}
console.log(brand+","+store);
displaydivs(brand,store);
}else{
$('#prod >div').show();
if(this.className == "brand"){
var index = brand.indexOf($(this).attr('id'));
if (index > -1) {
brand.splice(index, 1);
}
}else if(this.className == "store"){
var index = store.indexOf($(this).attr('id'));
if (index > -1) {
store.splice(index, 1);
}
}
displaydivs(brand,store);
}
});
function displaydivs(brand,store)
{
$("#prod >div").hide();
if(brand.length > 0 & store.length > 0){
$.each(brand, function( index, value ){
var temp = $("#prod >div[data-brand="+value+"]")[0];
var data = $(temp).attr("data-store");
var idx = store.indexOf(data);
if(idx > -1){
$("#prod >div[data-brand="+value+"][data-store="+data+"]").show();
}
});
$.each(store, function( index, value ){
var temp = $("#prod >div[data-store="+value+"]")[0];
var data = $(temp).attr("data-brand");
var idx = brand.indexOf(data);
if(idx > -1){
$("#prod >div[data-brand="+data+"][data-store="+value+"]").show();
}
});
}
else if(brand.length > 0 & !(store.length > 0)){
$.each( brand, function( index, value ){
$("#prod >div[data-brand="+value+"]").show();
...