Adding jquery ui datepicker time dynamically?

Question

Hi, I really need a little help with my dynamic Schedule table. I want to add a datepicker to date, which is stored dynamically? can anyone grab me? this code will add a new row to the table when the user will add a new row?

$(document).ready(function ($) { // trigger event when button is clicked $("button").click(function () { // add new row to table using addTableRow function addTableRow($("table")); // prevent button redirecting to new page return false; }); // function to add a new row to a table by cloning the last row and // incrementing the name and id values by 1 to make them unique function addTableRow(table) { // clone the last row in the table var $tr = $(table).find("tbody tr:last").clone(); // get the name attribute for the input and select fields $tr.find("input,select").attr("name", function () { // break the field name and it number into two parts var parts = this.id.match(/(\D+)(\d+)$/); // create a unique name for the new field by incrementing // the number for the previous field by 1 return parts[1] + ++parts[2]; // repeat for id attributes }).attr("id", function () { var parts = this.id.match(/(\D+)(\d+)$/); return parts[1] + ++parts[2]; }); // append the new row to the table $(table).find("tbody tr:last").after($tr); }; }); <table> <thead> <tr> <th scope="col">Date</th> <th scope="col">Start Time</th> <th scope="col">End Time</th> <th scope="col">Hour Type</th> </tr> </thead> <tbody> <tr> <td><input name="date1" id="date1"></td> <td><input name="startTime1" id="startTime1"></td> <td><input name="endTime1" id="EndTime1"></td> <td> <select name="hourType1" id="hourType1"> <option value="">Please select</option> <option value="1">Regular</option> <option value="2">Overtime</option> </select> </td> </tr> </tbody> </table> <button>Add Row</button> 

Answer 1

Instead of using id use class :

HTML

 <td><input name="date1" class="date"></td> 

JQuery

 $(".date").datepicker(); 

Answer 2

 addTableRow($("table")); 

After you have done it.

 $("table tr").last().find('input.date-field').datepicker({...}); //{} = datepicker settings.