Dynamically adding JQuery date time picker in custom webpart on html button click

Hi,

I have written a javascript function to add some textboxes dymanically to a div. I want the textbox to behave as Jquery datepicker.
 
I have added Jquery references in my page and i have written $(".className).datepicker() at the end of the JS function. But its not working. I also tried $(".className).datepicker("refresh") , but in vain 

This is the JS function

function BindDatePickers() {

            //Changing the button on click to validate the data
            $("#EditDashBoard").off('click', 'a').on('click', ValidateData);
            $("#EditDashBoard").attr('value', 'Save');

            //Adding new date pickers for each memo date fields
            var index = 0;
            $(".gridStyle td a").each(function () {

                if ($(this).attr('href').toLowerCase().indexOf("workflowview.aspx") < 0) {

                    //Memo Name
                    var memoURL = $(this).attr('href').split('?')[0];
                    var memoName = memoURL.split('/')[memoURL.split('/').length - 1];

                    //Providing id for the anchor tag
                    $(this).attr("id", "hyp_" + memoName + "_memo" + index);

                    //hiding the currend date anchor date
                    $(this).hide();

                    //Make the datetime pickers visible
                    //$("#auditDate_" + memoName + "_memo" + index).show();

                    var datePicker = "<input type='text' id='auditDate_" + memoName + "_memo" + index + "' class='hasDatepicker'/>";
                    $(this).parent().append(datePicker);
                    index++;
                }
            });

            $(".hasDatepicker").datepicker();
        }

But its not showing the date picker .. What could be the reason??

Thanks

Arjun Menon U.K