Javascript HTML两级手风琴菜单隐藏而不添加内容

我想做两级手风琴菜单.第一级很好，但当我添加第二级时，第二级内容隐藏在第一级第2节标题中.有人知道我该怎么解决这个问题？

我的html代码如下:

<div class="container-wrapper"></div>
    <button class="accordion"><p class="title-sections">Provisioning</p></button>
    <div class="panel">
        <button class="sub-accordion">Set Variables</button>
        <div class="sub-panel">
            <p>Lorem ipsum...</p>
        </div>
        <button class="sub-accordion">Get Variables</button>
        <div class="sub-panel">
            <p>Lorem ipsum...</p>
         </div>
         <button class="sub-accordion">Reset</button>
         <div class="sub-panel">
             <p>Lorem ipsum...</p>
         </div>
         <button class="sub-accordion">Get Base Report</button>
         <div class="sub-panel">
             <p>Lorem ipsum...</p>
         </div>
         </div>
    
     <button class="accordion"><p class="title-sections">Availability</p></button>
     <div class="panel">
         <p>Lorem ipsum...</p>
     </div>

我的CSS:

.accordion {
        background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        text-align: left;
        border: none;
        outline: none;
        transition: 0.4s;
    }

    .sub-accordion {
        background-color: rgb(181, 255, 191);
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        text-align: center;
        border: none;
        outline: none;
        transition: 0.4s;
    }

    .active, .accordion:hover {
       background-color: #ccc;
    }

    .sub-active, .sub-accordion:hover {
        background-color: rgb(104, 255, 124);;
    }

    .panel {
      padding: 0 18px;
      background-color: white;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
    }

    .sub-panel {
        padding: 0 18px;
        background-color: lightblue;
        max-height: 0;
        overflow: hidden;
        transform: max-height 0.2s ease-out;
    }

    .container-wrapper {
        padding: 20pt;
    }

    .title-sections {
        font-size: 20px;
    }

最后，我的JS，问题来了.我复制粘贴了第一级手风琴的相同代码来制作第二级手风琴，但高度有问题，但我不太知道需要更改哪个部分:

var acc = document.getElementsByClassName("accordion");
var i;
var sub_acc = document.getElementsByClassName("sub-accordion");
var j;


for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

for (j = 0; j < sub_acc.length; j++) {
  sub_acc[j].addEventListener("click", function() {
    this.classList.toggle("sub-active");
    var sub_panel = this.nextElementSibling;
    if (sub_panel.style.maxHeight) {
      sub_panel.style.maxHeight = null;
    } else {
      sub_panel.style.maxHeight = sub_panel.scrollHeight + "px";
    }
  });
}