Liferay.AutoFields and DatePicker in Diferey

I have a requirement to duplicate a set of input fields with the click of a button; as many times as required.

This function is the same as in LIferay:

Select "Control Panel → User", click on any user.

On the right side of the page, in the Identification section; Click Addresses, Phone Numbers.

Pressing the PLUS symbol (Add button) duplicates a set of input fields.

Here is the code that I executed for my requirement.

Code for input field:

<input class="date-pick" readonly="readonly" id="<portlet:namespace/>fromDate1"   type="text" onchange="showDate()"

     name="<portlet:namespace/>fromDate1" value="" />" >

In javascript, the date value is used:

function showDate()
  {
   alert(document.getElementById("<portlet:namespace/>fromDate1"));
  }

JQuery function to bind datepicker with text field:

jQuery(function(){
  jQuery('.date-pick').datepicker({autoFocusNextInput: true});
});

Liferay.Autofields function for creating repeating rows of form fields:

jQuery(
  function () {
        new Liferay.AutoFields(
                    {
                          container: '#<portlet:namespace />webFields',
                          baseRows: '#<portlet:namespace />webFields > .lfr-form-row',
                          fieldIndexes: '<portlet:namespace />formFieldsIndexes',
                          onAdd: function(newField) {
                                      alert('This field got added.');
                                      jQuery('.date-pick').datepicker({autoFocusNextInput: true});
                                },

                          onRemove: function() {
                                      alert('The last field was removed.');
                                }
                    }
        );
  }

);

datepicker ; , PLUS ( "" ), datepicker .

, , (. javascript function showDate()).

- - ; , ,