Создание динамически сгруппированных групп с разными идентификаторами

Question

Я разрабатываю веб-страницу с бутстрапом и собираю группу в пределах множества разборных групп.

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

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

<div class="panel-group" id="accordion"> 
    <div class="panel panel-default"> 
    <div class="panel-heading" style="height:30px"> 
     <h4 class="panel-title"> 
      <p analysisid="1" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse1" style="text-decoration:blink; cursor: pointer; font-size: small">Analytics 1</p> 
     </h4> 
    </div> 
    <div id="collapse1" class="panel-collapse collapse in"> 
     <div class="panel-body"> 
      <div class="panel-group" id="Layers10"> 
       <div class="panel panel-default"> 
         <div class="panel-heading" style="height:30px"> 
          <h4 class="panel-title checkbox-inline"> 
           <input type="checkbox" value=""> 
           <p data-toggle="collapse" data-parent="#Layers10" href="#Layer11" style="text-decoration:blink; cursor: pointer; font-size: small">Layer 1</p> 
          </h4> 
         </div> 
         <div id="Layer11" class="panel-collapse collapse in"> 
          <div class="panel-body"> 
          </div> 
         </div> 
        </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    <p class="btn-link" id="Add_new_analytics" data-toggle="modal" data-target="#Add_new_analytics" style=" cursor: pointer;text-align: center">Add New Analytics</p> 
</div> 

<script> 
    $('#Add_new_analytics').click(function(){ 
    var collapseid = parseint($("#accordion").children('div').children('div').last().attr('id').text(),10); 
    $("#accordion").append('<div class="panel panel-default"><div class="panel-heading" style="height:30px"><h4 class="panel-title"><p analysisid="1" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#'+collapseid+'" style="text-decoration:blink; cursor: pointer; font-size: small">Analytics 1</p></h4></div><div id="'+collapseid+'" class="panel-collapse collapse in"><div class="panel-body"><p>hello</p></div></div>'); 
    }); 
    }); 
</script> 

Answer 1

Добавить ниже код на щелчком кнопки и изменить collapse1 только 1

$('#Add_new_analytics').click(function(){ 
     var collapseid = parseInt($("#accordion:last").find('div.panel-collapse').attr('id')) + 1; 
     $("#accordion").append('<div class="panel panel-default"><div class="panel-heading" style="height:30px"><h4 class="panel-title"><p analysisid="1" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#'+collapseid+'" style="text-decoration:blink; cursor: pointer; font-size: small">Analytics 1</p></h4></div><div id="'+collapseid+'" class="panel-collapse collapse in"><div class="panel-body"><p>hello</p></div></div>'); 
});