Why is the initial state of my inputs ignored?

Please check out my fiddle below. A checkbox with nested checkboxes. The change function works fine: if any $('#checkbox' + x) is checked, the corresponding $('.entry' + x) shows, and if unchecked, hidden.

The initial state of my checkboxes is ignored until at least one of the checkboxes are clicked. In the example, initially all $('.entry' + x) show, although #checkbox1, -2 and -3 are initially checked. But: if I then uncheck #checkbox2, only .entry1 and .entry3 show, all other elements hide. From there on, everything works as expected.

I've tried the following:

1. $('#checkbox1').click(); so just clicking without "actually" clicking (leads to checkbox1 being unchecked but nothing else happens until I click on any of the checkboxes)

2. setting a checkbox to .prop('checked', true) (pretty much the same result like in 1)

3. I've also tried it with an if/else statement like

`

if ($('#checkbox' + x).prop('checked') == 'true') {
$('.entry' + x).show();
}
else{
$('.entry' + x).hide();
}`

Still nothing. How do I gain control over the initial states of the checkboxes in this example? Please help me, I just can't figure it out. Just to make clear what i want to achieve: I'd like to be able to set the props to checked and have the checked/unchecked "+ x" elements be hidden and shown accordingly, and create .on('click', ...) events to change the props later on and have them always behave accordingly.

 $(function () {
              // CHECKBOXES GROU AND NESTED CHECKBOXES HIDE/SHOW SYNCHRONIZING
              $.fn.nestedCheckboxes = function (stopPropogation) {
                this.addClass('nestedCheckboxes');
                this.on('click', ':has( > input[type=checkbox])', nestedCheckboxHandler);
                $(this).nestedCheckboxHandler;
                function nestedCheckboxHandler(evt) {
                  if ($(evt.target).is("input[type=checkbox]")) {
                    var parentContainer = $(this);
                    var checkbox = parentContainer
                      .find(' > input[type=checkbox]:eq(0)');
                    var parentCheckbox = parentContainer
                      .parent()
                      .closest(':has( > input[type=checkbox])')
                      .children('input[type=checkbox]');
        
                    if (evt.target == checkbox[0]) {
                      $('input[type=checkbox]', parentContainer)
                        .prop("checked", checkbox.prop("checked"));
                      $(function () {
                        $(new Array(5).fill(1).map((_, i) => i + 1)).each(function (idx, x) { // Array for the number of div elements
                          $('.entry' + x)[($('#checkbox' + x).prop("checked") ? "show" : "hide")](); // synchronize
        
                          $('#checkbox' + x).on('change', function () {      // toggle on change     
                            $('.entry' + x).toggle();
                          });
                        });
                      });
                    }
                    var parentCheckboxValue = !parentCheckbox
                      .parent()
                      .find("input[type=checkbox]")
                      .not(parentCheckbox[0])
                      .is("input[type=checkbox]:not(:checked)");
        
                    parentCheckbox.prop("checked", parentCheckboxValue);
                  } else if (stopPropogation) {
                    evt.stopPropagation();
                  }
                };
              };
                $('.treeX-container form').nestedCheckboxes();
            });

* {
            list-style-type:none;
            }
            .l0{
            color: #000;
            font-weight: bold;
            }
            .entry1,
            .l1{
            color: #ff3333;
            }
            .entry2,
            .l2{
            color: #003DFF;
            }
            .entry3,
            .l3{
            color: #FF8A0E
            }
            .entry4,
            .l4{
            color: #45F300;
            }
            .entry5,
            .l5{
            color: #E700EF;
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <div class="treeX-container">
              <ul>
                <form>
                  <li>
                    <input type="checkbox"/>
                      <span class="l0">ALL</span>
                        <ul>
                          <li>
                            <input type="checkbox" id="checkbox1" value="1" checked />
                           <label class="l1">Entry1</label>
                          </li>
                          <li>
                            <input type="checkbox" id="checkbox2" value="1" checked />
                            <label class="l2">Entry2</label>
                          </li>
                          <li>
                            <input type="checkbox" id="checkbox3" value="1" checked />
                            <label class="l3">Entry3</label>
                          </li>
                          <li>
                            <input type="checkbox" id="checkbox4" value="1" />
                            <label class="l4">Entry4</label>
                          </li>
                          <li>
                            <input type="checkbox" id="checkbox5" value="1" />
                            <label class="l5">Entry5</label>
                          </li>
                       </ul>
                   </li>
                </form>
              </ul>
            </div>
            <div class="container">
            <div class="entry1">ENTRY1</div>
            <div class="entry2">ENTRY2</div>
            <div class="entry3">ENTRY3</div>
            <div class="entry4">ENTRY4</div>
            <div class="entry5">ENTRY5</div>
            </div>