如何创建具有多个动态表单的动态Bootstrap面板？

Question

我正在研究基于行程组织者的社交网络项目。在这个项目中创建行程时，它包含一个由用户动态创建的多天，并且单日有多个日程安排，这也将由用户动态创建。在我的代码中，我能够动态创建多天但是在日期面板上没有动态创建计划..请指导我，我将非常感激

<script type="text/javascript">
        var counter = 1;
        var limit = 6;
        function addPanel(divName) {
            if (counter == limit)  {
                alert("You have reached the limit of adding " + counter + " inputs");
            }
            else {
                newdiv = '<div class="panel panel-info">' +
                        '<div class="panel-heading">' +
                        '<h4 class="panel-title">' +
                        '<a data-toggle="collapse" data-parent="#accordion" href="#collapse' + (counter + 1) + '">Day ' + (counter + 1) + '<i class="fa fa-plus pull-right" aria-hidden="true"></i></a></h4>' +
                        '</div> ' +
                        '<div id="collapse' + (counter + 1) + '" class="panel-collapse collapse">' +
                        '<div class="panel-body" id="formcreation' + (counter + 1) + '">' +
                        '<div class="row" >' +
                        '<div class="col-md-12 sch-box">' +
                        '<div class="col-md-6 form-group">' +
                        '<input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]">' +
                        '</div>' +
                        '<div class="col-md-6 form-group">' +
                        '<input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]">' +
                        '</div>' +
                        '<div class="col-md-12 form-group">' +
                        '<input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]">' +
                        '</div>' +
                        '<div class="col-md-12 form-group">' +
                        '<textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div><button type="button" class="btn center-block" id="add-btn" onClick="addForm("dynamicInput");"><i class="fa fa-plus"></i> </button>' +
                        '</div>' +
                        '</div>';

                $("#" + divName).append(newdiv);
                counter++;
            }
            $(document).ready(function () {
                $('#counter').attr('value',counter);
            });

        }
    </script>

    <script>

        var counter2= 1;
        var limit = 6;
        var i=1;
        function addForm(){
            if (counter2 == limit)  {
                alert("You have reached the limit of adding " + counter2 + " inputs");
            }
            else {
                
                    var newform = document.createElement('div');
                    newform.innerHTML = '<div class="row" >' +
                            '<div class="col-md-12 sch-box"> ' +
                            '<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"></div> ' +
                            '<div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"></div> ' +
                            '<div class="col-md-12 form-group"><input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"></div> ' +
                            '<div class="col-md-12 form-group"><textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea></div> ' +
                            '</div>' +
                            '</div>';
                           var putItHere = "formcreation"+i+"";
                    document.getElementById(putItHere).appendChild(newform);
                    counter2++;
                 

            }
        }
    </script>

<div class="col-md-12">
  <div>
    <div class="col-md-12" id="dynamicInput">
    <!--Start Panel-->
       <div class="panel-group" id="accordion">
         <div class="panel panel-info">
            <div class="panel-heading">
               <h4 class="panel-title">
                 <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Day 1<i class="fa fa-plus pull-right" aria-hidden="true"></i></a></h4>
             </div>
             <div id="collapse1" class="panel-collapse collapse">
              <div class="panel-body" id="formcreation1">
                    {{--Schedule--}}
               <div class="row" >
                  <div class="col-md-12 sch-box">
                                                                <div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"></div>
                                                                <div class="col-md-6 form-group"><input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"></div>
                                                                <div class="col-md-12 form-group"><input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"></div>
                                                                <div class="col-md-12 form-group"><textarea id="sch-title" class="form-control vresize" name="sch-title[]"></textarea></div>
                 </div>
              </div>
          </div>
         <button type="button" class="btn center-block" id="add-btn" onClick="addForm('dynamicInput');"><i class="fa fa-plus"></i> </button>
      </div>
    </div>
  </div>
</div>
  <!--End panel-->
</div>
    <button type="button" class="btn center-block" onClick="addPanel('dynamicInput');"><i class="fa fa-plus"></i> </button>
</div>