drop down calendar not coming in new inserted row in html table

Question

I have a table single input field with calendar when i click on input drop down calendar is coming to select the date. By using javascript i am inserting a new row in the table . Row is inserting in the table but date calendar not coming in new inserted row date field as in above line . I am using the following code

 function addRow() { var table = document.getElementById("mintable"); var rowCount = parseInt(document.getElementById("minRows").value); var rowInsert = parseInt(document.getElementById("sizemin").value); var row = table.insertRow(rowInsert + 1); var cell1 = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "text"; element1.id = "minenddate" + (rowCount); element1.className = "form-control"; cell1.appendChild(element1); rowCount = parseInt(rowCount) + 1; document.getElementById("minRows").value = rowCount; document.getElementById("sizemin").value = parseInt(document.getElementById("sizemin").value) + 1; } $(function() { count = document.getElementById("minsize").value; i = 0; dateId = "datepicker2"; for (i = 0; i <= (count + 1); i++) { dateId = "#datepicker2" + i; $(dateId).datepicker(); } }); 

 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <input type="hidden" id="minsize" value="1"> <div class=""> <table id="mintable" class="table table-bordered table-striped stripe hover row-border"> <thead class="div-head"> <tr> <th><b>Date</b></th> </tr> </thead> <tbody> <tr> <td><input type="text" id='datepicker20' value="2018-08-09" class="form-control"></td> </tr> </tbody> </table> <input type="hidden" name="minRows" id="minRows" value='1'> <input type="hidden" id="sizemin" name="sizemin" value='1' /> </div> <input type="submit" data-toggle="tooltip" title="Insert new horizon " data-placement="top" class="btn btn-primary" id="button" value="Add Row" onClick="addRow()" /> 

Answer 1

You have to re-initialize the datepicker on dynamically added elements.

Here's how to add it.

$('#'+element1.id).datepicker();

 function addRow() { var table = document.getElementById("mintable"); var rowCount = parseInt(document.getElementById("minRows").value); var rowInsert = parseInt(document.getElementById("sizemin").value); var row = table.insertRow(rowInsert + 1); var cell1 = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "text"; element1.id = "minenddate" + (rowCount); element1.className = "form-control"; cell1.appendChild(element1); $('#' + element1.id).datepicker(); //add this line to initialize rowCount = parseInt(rowCount) + 1; document.getElementById("minRows").value = rowCount; document.getElementById("sizemin").value = parseInt(document.getElementById("sizemin").value) + 1; } $(function() { count = document.getElementById("minsize").value; i = 0; dateId = "datepicker2"; for (i = 0; i <= (count + 1); i++) { dateId = "#datepicker2" + i; $(dateId).datepicker(); } }); 

 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="resources/js/jquery.dataTables.min.js"></script> <script src="resources/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <input type="hidden" id="minsize" value="1"> <div class=""> <table id="mintable" class="table table-bordered table-striped stripe hover row-border"> <thead class="div-head"> <tr> <th><b>Date</b></th> </tr> </thead> <tbody> <tr> <td><input type="text" id='datepicker20' value="2018-08-09" class="form-control" /></td> </tr> </tbody> </table> <input type="hidden" name="minRows" id="minRows" value='1'> <input type="hidden" id="sizemin" name="sizemin" value='1' /> </div> <input type="submit" data-toggle="tooltip" title="Insert new horizon " data-placement="top" class="btn btn-primary" id="button" value="Add Row" onClick="addRow()" />