I am looking for the most efficient way to add a set of fields with datepicker widget attached on click event. So here I have a set of indexed events being generated on a page:

<div id="events">
  <div class="event">
    <input type="text" id="event_0_startDate" name="event[0].startDate" class="date"/>
    <input type="hidden" id="event_0_startDate_day" name="event[0].startDate_day" />
    <input type="hidden" id="event_0_startDate_month" name="event[0].startDate_month" />
    <input type="hidden" id="event_0_startDate_year" name="event[0].startDate_year"/>
  </div>
  <div class="event">
    <input type="text" id="event_1_startDate" name="event[1].startDate" class="date"/>
    <input type="hidden" id="event_1_startDate_day" name="event[1].startDate_day" />
    <input type="hidden" id="event_1_startDate_month" name="event[1].startDate_month" />
    <input type="hidden" id="event_1_startDate_year" name="event[1].startDate_year" />
  </div>
.... more event divs ....

</div>

<a href="#" id="add_event">Add event</a>

.. with datepicker widget attached:

$(".date").datepicker({
    onClose: function(dateText,picker) {
        var prefix = $(this).attr('id');
        $('#' + prefix + '_month').val( dateText.split(/\//)[0] );
        $('#' + prefix + '_day').val( dateText.split(/\//)[1] );
        $('#' + prefix + '_year').val( dateText.split(/\//)[2] );
    }
});

I need a function that will add inside div id="events" after the last div class="event" another div class="event" where N is the next index and attach datepicker widget above to the new input field with class="date" like:

<div class="event">
  <input type="text" id="event_N_startDate" name="event[N].startDate" class="date"/>
  <input type="hidden" id="event_N_startDate_day" name="event[N].startDate_day"/>
  <input type="hidden" id="event_N_startDate_month" name="event[N].startDate_month" />
  <input type="hidden" id="event_N_startDate_year" name="event[N].startDate_year" />
</div>

Thank you.