Nested dynamic lists of checkboxes in HTML Javascript

I am new to HTML/JS and am looking to create a nested list of checkboxes dynamically. I am able to create the lists fine but I want that if a parent checkbox is checked, all children checkboxes are also changed. Additionally, if all children checkboxes are checked, I want the parent checkbox to also get selected.

I have tried various approaches from different posts here but all the examples I found so far have had static lists and I have not been able to replicate the effect with dynamic lists yet.

Any help would be really appreciated!