title: how to create dynamic Bootstrap panel having multiple dynamic form?
body: <p>i am working on social network project which base on Itinerary Organizer.. In this project when create itinerary it contain a multiple Days which create by user dynamically and that single day have multiple schedule which will be also created by user dynamically.. in my code i am able to create multiple days dynamically but the is on day panel doesn't create schedule dynamically.. Please guide me i will be very thankful</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
          var counter = 1;
          var limit = 6;
          function addPanel(divName) {
              if (counter == limit)  {
                  alert("You have reached the limit of adding " + counter + " inputs");
              }
              else {
                  newdiv = '&lt;div class="panel panel-info"&gt;' +
                          '&lt;div class="panel-heading"&gt;' +
                          '&lt;h4 class="panel-title"&gt;' +
                          '&lt;a data-toggle="collapse" data-parent="#accordion" href="#collapse' + (counter + 1) + '"&gt;Day ' + (counter + 1) + '&lt;i class="fa fa-plus pull-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/h4&gt;' +
                          '&lt;/div&gt; ' +
                          '&lt;div id="collapse' + (counter + 1) + '" class="panel-collapse collapse"&gt;' +
                          '&lt;div class="panel-body" id="formcreation' + (counter + 1) + '"&gt;' +
                          '&lt;div class="row" &gt;' +
                          '&lt;div class="col-md-12 sch-box"&gt;' +
                          '&lt;div class="col-md-6 form-group"&gt;' +
                          '&lt;input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"&gt;' +
                          '&lt;/div&gt;' +
                          '&lt;div class="col-md-6 form-group"&gt;' +
                          '&lt;input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"&gt;' +
                          '&lt;/div&gt;' +
                          '&lt;div class="col-md-12 form-group"&gt;' +
                          '&lt;input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"&gt;' +
                          '&lt;/div&gt;' +
                          '&lt;div class="col-md-12 form-group"&gt;' +
                          '&lt;textarea id="sch-title" class="form-control vresize" name="sch-title[]"&gt;&lt;/textarea&gt;' +
                          '&lt;/div&gt;' +
                          '&lt;/div&gt;' +
                          '&lt;/div&gt;' +
                          '&lt;/div&gt;&lt;button type="button" class="btn center-block" id="add-btn" onClick="addForm("dynamicInput");"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt; &lt;/button&gt;' +
                          '&lt;/div&gt;' +
                          '&lt;/div&gt;';
  
                  $("#" + divName).append(newdiv);
                  counter++;
              }
              $(document).ready(function () {
                  $('#counter').attr('value',counter);
              });
  
          }
      &lt;/script&gt;
  
      &lt;script&gt;
  
          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 = '&lt;div class="row" &gt;' +
                              '&lt;div class="col-md-12 sch-box"&gt; ' +
                              '&lt;div class="col-md-6 form-group"&gt;&lt;input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"&gt;&lt;/div&gt; ' +
                              '&lt;div class="col-md-6 form-group"&gt;&lt;input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"&gt;&lt;/div&gt; ' +
                              '&lt;div class="col-md-12 form-group"&gt;&lt;input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"&gt;&lt;/div&gt; ' +
                              '&lt;div class="col-md-12 form-group"&gt;&lt;textarea id="sch-title" class="form-control vresize" name="sch-title[]"&gt;&lt;/textarea&gt;&lt;/div&gt; ' +
                              '&lt;/div&gt;' +
                              '&lt;/div&gt;';
                             var putItHere = "formcreation"+i+"";
                      document.getElementById(putItHere).appendChild(newform);
                      counter2++;
                   
  
              }
          }
      &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-md-12"&gt;
    &lt;div&gt;
      &lt;div class="col-md-12" id="dynamicInput"&gt;
      &lt;!--Start Panel--&gt;
         &lt;div class="panel-group" id="accordion"&gt;
           &lt;div class="panel panel-info"&gt;
              &lt;div class="panel-heading"&gt;
                 &lt;h4 class="panel-title"&gt;
                   &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapse1"&gt;Day 1&lt;i class="fa fa-plus pull-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/h4&gt;
               &lt;/div&gt;
               &lt;div id="collapse1" class="panel-collapse collapse"&gt;
                &lt;div class="panel-body" id="formcreation1"&gt;
                      {{--Schedule--}}
                 &lt;div class="row" &gt;
                    &lt;div class="col-md-12 sch-box"&gt;
                                                                  &lt;div class="col-md-6 form-group"&gt;&lt;input type="time" class="form-control" value="00:00" id="sch-s-time" name="sch-s[]"&gt;&lt;/div&gt;
                                                                  &lt;div class="col-md-6 form-group"&gt;&lt;input type="time" class="form-control" value="00:00" id="sch-e-time" name="sch-e[]"&gt;&lt;/div&gt;
                                                                  &lt;div class="col-md-12 form-group"&gt;&lt;input type="text" class="form-control" placeholder="Enter Description" id="sch-title" name="sch-title[]"&gt;&lt;/div&gt;
                                                                  &lt;div class="col-md-12 form-group"&gt;&lt;textarea id="sch-title" class="form-control vresize" name="sch-title[]"&gt;&lt;/textarea&gt;&lt;/div&gt;
                   &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
           &lt;button type="button" class="btn center-block" id="add-btn" onClick="addForm('dynamicInput');"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt; &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
    &lt;!--End panel--&gt;
  &lt;/div&gt;
      &lt;button type="button" class="btn center-block" onClick="addPanel('dynamicInput');"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt; &lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>