datepicker on dynamically created row with inputs

Question

I have a form which has the possibility to dynamically create new row with inputs, the date input on each new row should have a datepicker. I have this almost working, but when

Answer 1

This is ur Answer I have done it......

 $(function(){
        // start a counter for new row IDs
        // by setting it to the number
        // of existing rows
        $('.datepick').datepicker();

        var newRowNum = 0;

        // bind a click event to the "Add" link
        $('#addnew').click(function(){
            // increment the counter
            newRowNum = $(productTable).children('tbody').children('tr').length +1;

            // get the entire "Add" row --
            // "this" refers to the clicked element
            // and "parent" moves the selection up
            // to the parent node in the DOM
            var addRow = $(this).parent().parent();

            // copy the entire row from the DOM
            // with "clone"
            var newRow = addRow.clone();

            // set the values of the inputs
            // in the "Add" row to empty strings
            $('input', addRow).val('');

            // insert a remove link in the last cell
            $('td:last-child', newRow).html('<\/i><\/a>');

            // insert the new row into the table
            // "before" the Add row
            addRow.before(newRow);

            // add the remove function to the new row
            $('a.remove', newRow).click(function(){
                $(this).closest('tr').remove();
                return false;               
            });

            $('#date', newRow).each(function(i){
              var newID = 'date_' + newRowNum;
           $(this).attr('id', newID).removeClass('hasDatepicker')
                  .removeData('datepicker')
                  .unbind()
                  .datepicker();
                 i++;
            });

            // prevent the default click
            return false;
        });