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