How to use datepicker with dynamic table

I am trying to use jQuery datepicker with a dynamic table. The problem I am having is that the date picker keep changing the date in the first row. The codes I am currently using is as follows:-

<script>
$( document ).ready(function() {

  $(function()

        {
            $(".datepicker").datepicker({dateFormat: "dd M yy", changeMonth: true, changeYear: true,Anim:"Clip"});

            $(".datepicker").attr('readOnly', 'true');

        }
    );

    $(".button").click(function() {

                var $currentrow= $(this).closest('tr');
                $(".datepicker").datepicker("destroy")
                var $newrow=$currentrow.clone(true);
                $newrow.find('input:text').val('');
                $newrow.find(".datepicker").datepicker({dateFormat: "dd M yy", changeMonth: true, changeYear: true,Anim:"Clip"});
                $newrow.appendTo('tbody');

            })

        });

</script>

Select allOpen in new window

So what do I need to do to insert the date into the new row.

Thanks