从动态创建的引导手风琴列表中，同时单击一个它打开但其他手风琴没有关闭？

Question

我的要求是在弹出窗口中动态创建多个引导手风琴，具体取决于用户输入的数量。在单击第一个手风琴时，它会打开，但是当单击第二个手风琴时，第一个手风琴没有关闭。请帮我解决这个问题。

网页代码

    <div class="modal-body col-ms-12 col-sm-12 col-xs-12 ">
    <div class="col-ms-12 col-sm-12 col-xs-12">
    <h4 class="col-ms-3 col-sm-3 col-xs-3 nopadding">Number of workLoad</h4> 
    <input type="text" id="myText" value="1" onkeypress="return isNumber(event)" class=" col-ms-6 col-sm-6 col-xs-6"> 
    <button class="workLoadNumber col-ms-3 col-sm-3 col-xs-3">Submit</button><br>
    </div>
    <div class="container col-ms-12 col-sm-12 col-xs-12">
     <div class="panel-group col-ms-12 col-sm-12 col-xs-12" id="accordion">
        <p id="demo" class="col-ms-12 col-sm-12 col-xs-12"></p>
    </div>
    </div>
    </div>

Js 代码

    for(var i =1 ; i<= userEnteredValue ; i++){  
    selectedNodeContent  += '<div class="panel panel-default">
    <div class="panel-heading"><h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#'+accordionBaseOpen+i+'">Collapsible Group 2</a>
    </h4></div><div id="'+accordionBaseOpen+i+'" class="panel-collapse collapse">
    <div class="panel-body">Hi How are you </div>
</div>
</div>'; 
    }
    document.getElementById("demo").innerHTML = selectedNodeContent;

Answer 1

 Remove the p tag and place the accordions inside parent div. 

<div class="modal-body col-ms-12 col-sm-12 col-xs-12 ">
        <div class="col-ms-12 col-sm-12 col-xs-12">
        <h4 class="col-ms-3 col-sm-3 col-xs-3 nopadding">Number of workLoad</h4> 
        <input type="text" id="myText" value="1" onkeypress="return isNumber(event)" class=" col-ms-6 col-sm-6 col-xs-6"> 
        <button class="workLoadNumber col-ms-3 col-sm-3 col-xs-3">Submit</button><br>
        </div>
        <div class="container col-ms-12 col-sm-12 col-xs-12">
         <div class="panel-group col-ms-12 col-sm-12 col-xs-12" id="accordion">
        </div>
        </div>
        </div>
JS:
 for(var i =1 ; i<= userEnteredValue ; i++){  
    selectedNodeContent  += '<div class="panel panel-default">
    <div class="panel-heading"><h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#'+accordionBaseOpen+i+'">Collapsible Group 2</a>
    </h4></div><div id="'+accordionBaseOpen+i+'" class="panel-collapse collapse">
    <div class="panel-body">Hi How are you </div>
</div>
</div>'; 
    }
    **document.getElementById("accordion").innerHTML = selectedNodeContent;**