How to add second level filtering to filtered results using PHP, JS

Question

I have a page on my site where a user can select boxes to return a query based on their selection. For example, my header looks like:

_Burgers _Fries _Beverage _small _medium _large

The first row is working great, if a user selects Burgers, it returns only Burger meals, If they select Burgers and Beverage it returns only the meals that have a Burger and Beverage, etc.

If, for example, the page looks like:

X Burgers X Fries _ Beverage _small _medium _large

It is returning:

Burger & Fries Meal Combo #1 (small) Burger & Fries Meal Combo #1 (medium) Burger & Fries Meal Combo #1 (large) Burger & Fries Meal Combo #2 (small) Burger & Fries Meal Combo #2 (medium) Burger & Fries Meal Combo #2 (large)

The issue I am having is figuring out how to add the second level of filters so that if a user selects "small", it only returns the small combo options.

I am using the MODX CMS, so my landing page has the following code (the [[whatever]] is just the query to the database to return results in that div):

<div class="combo-hide-me" id="default">[[!comboLanding? &filter=`default`]]</div>
<div class="combo-hide-me" id="burger_div_id" style="display: none;">[[!comboLanding? &filter=`b`]]</div>
<div class="combo-hide-me" id="fries_div_id" style="display: none;">[[!comboLanding? &filter=`f`]]</div>
<div class="combo-hide-me" id="beverage_div_id" style="display: none;">[[!comboLanding? &filter=`b`]]</div>
<div class="combo-hide-me" id="beveragefries_div_id" style="display: none;">[[!comboLanding? &filter=`bf`]]</div>
etc..

My javascript looks like:

// combo checkbox selction
$(document).ready(function () {
packageOutput();
});

function packageOutput() {

// set the main div to return filtered results
var packageDiv = $(".plans-container");

// set empty array
var idArr = [];

// get the checked values
var checked = $(".active");

// loop and build array
checked.each(function () {
    idArr.push($(this).prop("id"));
});

// remove whitespace in array
var trimArray = idArr.join("");

// function below    
toggleShowHide(trimArray, packageDiv);
}

function toggleShowHide(arr, elem) {

// determine if there are boxes checked
var arrLen = arr.length;

// clear last selected item
$(".combo-hide-me").hide();

// set default if array is empty
if (arrLen < 1 ){

    //function below
    setDefault(elem);
}

// run the show hide based on array of selection
for(i = 0; i < arrLen; i++) {

    // set the div name from array
    var temp = "#" + arr + "_div_id";

    $(temp).show();
    $("#default").hide();
} 

// unhide
elem.show();
}

function setDefault(elem){
$("#default").show();
}

Thank you in advance for any guidance you can provide in getting the second level filters working.

EDIT: I just realized I did not add my code for the select boxes for small, medium, large:

<div class="sizes" id="size_div_id">
<h4>Combo Sizes:</h4>
  <div class="checks">

    <div class="selection">
      <input type="checkbox" id="small" name="combosize">
      <label for="small"><span></span>Small</label>
    </div>

    <div class="selection">
      <input type="checkbox" id="medium" name="combosize">
      <label for="medium"><span></span>Medium</label>
    </div>

    <div class="selection">
      <input type="checkbox" id="large" name="combosize">
      <label for="large"><span></span>Large</label>
    </div>

  </div>
</div>

Answer 1

I was able to solve second level filtering by inserting the following code to my javascript;

$(".classes input[type='checkbox']").click(function(e) {
       var innerTextHTML = $(this).parent("div.selection").children('label').text();
       var planWrap = $("div.plan."+innerTextHTML).parent();

       if ($(this).is(':checked')){
             planWrap.show();
       }else{
             planWrap.hide();
       }
});

One issue I had when I used this was nth row styling, which I was able to fix using jquery detach.