Filtering HTML5 data-attribute elements via checkboxes using JQuery

Filtering HTML5 data-attribute elements via checkboxes using JQuery

In my listing wrapper each product has multiple data-attributes like data-baths="3", data-beds="4", data-halfbath="12", data-garages="2", data-stories="2", data-price="2", data-sqft="2567".

I have checkboxes that has a category corresponding to the data-category="value" here value may be baths/ beds/ halfbath/ garages/ stories/ price/ sqft like

  1. <input type='checkbox' class='filter' data-filter='baths' value='1'> 1 Bathroom
  2. <input type='checkbox' class='filter' data-filter='beds' value='2'> 2 Bedrooms

So when a user selects checkboxes I need to only display the products based on the category.

Problem is, if I choose multiple categories (checkbox values) it is missing some criteria and displaying unconditional data.

Here is my  JSFiddle