Datepicker Not working with add more button

Question

Date picker not working when i'm using add more button .below is code. i will put only one id first.

 $('button#add_more').on('click', function() { var table = $('table#myTable tbody'), len = $('input[type=text]', table).length; table.append('<tr><td><input name="field-'+ (len+1)+'" type="text" id="datepicker" /></td></tr>'); }); $(function() { $( "#datepicker" ).datepicker(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <table id="myTable" border="1"> <tbody> </tbody> </table> <button id="add_more">Add</button> 

Answer 1

There are a few more lines of script you need for the html on top. Make '#datepicker' a class instead, since you are using multiple dates, then add $('.datepicker').datepicker() to your add function.

 $('button#add_more').on('click', function() { var table = $('table#myTable tbody'), len = $('input[type=text]', table).length; table.append('<tr><td><input name="field-' + (len + 1) + '" type="text" class="datepicker" /></td></tr>'); $(".datepicker").datepicker(); }); 

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <table id="myTable" border="1"> <tbody> </tbody> </table> <button id="add_more">Add</button>