Twitter bootstrap 从动态创建的引导手风琴列表'；s同时单击其中一个打开'；但是其他人没有关门吗？

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

Html代码

    <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;

for（var i=1；i
删除p标记并将手风琴放在父div中。
工作量
提交

JS:
对于（var i=1；i
 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;**