Calendar function is not working with jquery clone function

Calendar function is not working with jquery clone function

I am really new to jquery.

Below is the working example of add new rows when a button clicks. Each row contain Start Date and End Date. I can see the date picker in the first row. But when I add a new row I can't see the date picker. How can I fix this?

<link href="styles.css" rel="stylesheet" /> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <script> $(document).ready(function() { $(".datepicker").datepicker(); }); $(function () { $("#addButton").on("click", function () { var newRow = $(".addrows").first().clone().addClass("newAdded"); newRow.find(':input').val(''); newRow.appendTo("#TextBoxesGroup"); }); }); </script>
<table id="TextBoxesGroup"> <tr class="addrows"> <td>Start Date:</td> <td><input type="text" name="StartDate[]"class="datepicker" value="" autocomplete="off" size="6"> </td> <td>End Date:</td> <td> <input type="text" name="EndDate[]" class="datepicker" value="" autocomplete="off" size="6"> </td> </tr> </table> <table> <tr> <td> <input type="button" id="addButton" value="+" /> </td> </tr> </table>