Динамически создавать формы на кнопке Click не работает

Question

Я пытаюсь создать панель Bootstrap динамически с помощью функции щелчка, но каждая панель должна создавать несколько форм при нажатии кнопки. В моем коде первая панель создает формы, нажимая кнопку, но остальные панели не создают формы ..

var counter=1; 
 
    $(".panel-increment").on("click", function(e){ 
 
     e.preventDefault(); 
 
     var panelHtml = '<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">' + 
 
       '<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 panel-addbtn" ><i class="fa fa-plus"></i> </button> ' + 
 
       '</div> ' + 
 
       '</div>'; 
 
     $(this).closest(".it-right-side").find(".panel-group").append(panelHtml); 
 
     counter++; 
 
    }); 
 
    
 
    $(".panel-addbtn").on("click", function(e){ 
 
     e.preventDefault(); 
 
     var formHtml = '<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>'; 
 
     $(this).closest(".panel-collapse").find(".panel-body").append(formHtml); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-6 it-right-side"> 
 
    <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="formcreation"> 
 
       <!--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 panel-addbtn" ><i class="fa fa-plus"></i> </button> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div> 
 
<!--End panel--> 
 
</div> 
 
<button type="button" class="btn center-block panel-increment"><i class="fa fa-plus"></i> </button> 
 
</div>

Answer 1

Это потому, что:

$("selector").on("click", function(){ 

}); 

работает для статического HTML, в случае динамического HTML использования .on(), как:

$("document").on("click", ".panel-addbtn", function() { 

}); 

Answer 2

Вы можете попробовать определяя onclick событие в динамическом HTML как

<div onclick="myFunction()"> 
</div> 

теперь вы можете создать JavaScript функции, и это всегда будет работать. Значение html является статическим или динамическим.

function myFunction(){ 
//do something 
}