JS Button Checkbox Help

Hey there,

Looking to the experts out there for a helping hand! I’m a beginner and I can’t seem to figure out how to accomplish my goal.

I have a working codepen with some buttons, sub-buttons and checkboxes. The problem is that there aren’t any dependancies set up so they aren’t talking to each other. I would like to create a dependancy structure that has a parent-child relationship like the below.

Parent [Button] - (class=“cat-button”)

Dependant [Sub] (on Button)] - (class=“sub-cat-button”)
Dependant [Filter] (on Current)] - (id=“refine-filters”)


What I am trying to accomplish:
If I click Button 1 and I want to see if there are any Sub 2’s under Button 1, I click Sub 2 and only see the items that contain BOTH Button 1 and Sub 2
Right now it just grabs all of Sub 2’s from all Button’s. There are no dependancies.

The Filter is applied to the items that share the currently selected dependencies. So if Button 2 and Sub 3 are selected, the results of the filter will only be applied to those items under Sub 3.

Button and Sub focus (background-color) should always stay with the selected. If Button X and Sub X are clicked, the focus while also be applied to the Sub and stay with the Button (parent). However, if a Button is clicked while a Sub is focused, the Sub will lose it’s focus and the results will revert to the selected Button (no previously selected Sub’s).