как сделать динамический складной

Question

Я пытаюсь создать динамический складной аккордеон, который позволяет пользователю периодически добавлять вход в аккордеон.Но я делаю только добавление аккордеона, второй аккордеон прикрепляется к первому, где, если я щелкаю по второму аккордеону, он сворачивается и показывает родительский аккордеон.

Я пытался разработать код, основанный на моей логике, и все же мне не хватает какого-то элемента для увеличения идентификатора аккордеона.

@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