如何使动态可折叠

Question

我正在尝试制作一种可折叠的动态手风琴，它允许用户将输入内容重复添加到手风琴中。但是我正在做的只是添加手风琴，将第二个手风琴连接到第一个手风琴，如果我单击第二个手风琴，它会折叠并显示父手风琴。

我试图根据自己的逻辑开发代码，但是我缺少增加手风琴ID的某些元素。

@php           
  $groupIndex = 0; 
  $category = [$groupIndex + 1 ]; 
  @endphp

  function add_group()
  {
        let groupHTML = 
               '<div class="panel-group" id="accordion">'
            + '<div class="panel panel-default">'
            +  '<div class="panel-heading"><span class="glyphicon glyphicon-remove-circle pull-right "></span>'
            +    '<h4 class="panel-title">'
            +      '<a id="accordion-toggle.attr("href",  "#" + (++groupIndex))" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">' 
            +       'Group'                                
            +      '</a>'
            +     '</h4>'
            +  '</div>'
            +  '<div id="collapseThree" class="panel-collapse collapse">'
            +    '<div class="panel-body">'
            +            '<div class="panel-group" id="accordion2">'
            +                    '<div class="panel panel-default">'
            +                        '<div class="panel-heading">'
            +                            '<h4 class="panel-title">'
            +                                '<a class="accordion-toggle1" data-collapsed="true" data-toggle="collapse" data-parent="#accordion2" href="#collapseThreeOne">'
            +                                   'Category'
            +                                '</a>'
            +                           '</h4>'
            +                        '</div>'
            +                        '<div id="collapseThreeOne" class="panel-collapse collapse in">'
            +                            '<div class="panel-body">Panel 3.1</div>'
            +                        '</div>'
            +                    '</div>'
            +                    '<div class="panel panel-default">'
            +                        '<div class="panel-heading">'
            +                            '<h4 class="panel-title">'
            +                                '<a data-toggle="collapse" data-parent="#accordion2" href="#collapseThreeTwo">SubCategory'
            +                                '</a>'
            +                            '</h4>'
            +                        '</div>'
            +                        '<div id="collapseThreeTwo" class="panel-collapse2 collapse">'
            +                            '<div class="panel-body">Panel 3.2</div>'
            +                        '</div>'
            +                   ' </div>'
            +                        '</div>'
            +            '</div>'
            +          '</div>'
            +       '</div>'
            + '</div>'; 
    @php 
    $groupIndex++;
    $category++; 
    @endphp

    $('#group_section').append(groupHTML);
  }

    $(document).on('click', '.glyphicon-remove-circle', function () {
            $(this).parents('.panel').get(0).remove();
            });  

html：

    <div id="group_section" ></div>

<button class="btn btn-primary btn-add-panel" onclick="add_group()"> <i class="glyphicon glyphicon-plus"></i> Add Group </button>

It is adding the accordion, but my 2nd added accordion can't be clicked because the id is not being incremented