After a Long Search I found a working code which does what I wanted. Kindly refer the link
<div id="events_wrapper">
<div id="sub_events">
<p><label>Art Space </label>
<input type="text" id="as_name" name="as_name" class="txt-input small"/>
<input type="hidden" id="as_id" name="as_id" class="txt-input small"/>
</p>
<p><label>Start Date </label>
<input type="text" id="start_date" name="start_date" class="datepicker txt-input small"/>
<label>End Date </label>
<input type="text" id="end_date" name="end_date" class="datepicker txt-input small" />
</p>
<p><label>Opening Hours </label>
From : <input style="width: 100px" type="text" id="time_from" name="time_from" class="timepicker txt-input small" />
To : <input style="width: 100px" type="text" id="time_to" name="time_to" class="timepicker txt-input small"/> </p>
</div>
<br/>
<input type="button" id="add_another_event" name="add_another_event" value="Add Another" />
JS Function:
$('#add_another_event').click(function()
{
alert('test');var $address = $('#sub_events');
var num = $('.clonedAddress').length; // there are 5 children inside each address so the prevCloned address * 5 + original
var newNum = num + 1;
var newElem = $address.clone().attr('id', 'address' + newNum).addClass('clonedAddress');
//set all div id's and the input id's
newElem.children('div').each (function (i) {
this.id = 'input' + (newNum*5 + i);
});
newElem.find('input').each (function () {
this.id = this.id + newNum;
this.name = this.name + newNum;
});
if (num > 0) {
$('.clonedAddress:last').after(newElem);
} else {
$address.after(newElem);
}
$('.datepicker', newElem).removeClass('hasDatepicker').datepicker();
$('#btnDel').removeAttr('enabled');
});
$('.datepicker').datepicker();
Also Refer Jquery date picker and time picker do not work when fields are dynamically created
Hope this will help some one.!
Working Example of the above code: http://jsfiddle.net/MkhZ2/24/