having difficulties in dynamically adding textbox with datepicker

hi all,

I need help! Right now the problem is, when a button is click, it will run a function call addMoreDate(TableID). By running this function it will help me add new row of textbox. And also able to use datepicker for the textbox as well. However, I am able to add and display the textbox but not the datepicker. I tried to solve but I still can't find any solution. Pls Help! below is my code.

function addMoreDate(TableID) {

                var table = document.getElementById(TableID);

                var rowCount = table.rows.length;
                var row = table.insertRow(rowCount);

                var cell1 = row.insertCell(0);


               var element1 = document.createElement("input");


                element1.type = "text";
                element1.setAttribute('name', rowCount);

                element1.setAttribute('id', "datepicker");

                cell1.appendChild(element1);

                $(function() {
                    $( "#datepicker" ).datepicker({ showAnim: 'clip',
                                                    minDate: '+1d',
                                                    maxDate: '+60d',
                                                    showOn: 'button',
                                                    buttonImage: 'Image/calendar.gif',
                                                    buttonImageOnly: true,
                                                    dateFormat: 'dd-mm-yy' 
                });

                });
            }



<tr>
    <td></td>
    <td>
        <button type="button" onclick="addMoreDate('moredate')">Click to add more date</button>
        <table id="moredate">


        </table>
    </td>
</tr>