Добавить индексированные поля ввода с прикрепленным виджетами datepicker

Question

Я ищу наиболее эффективный способ добавить набор полей с виджем datepicker, прикрепленным к событию click. Так вот у меня есть набор индексированных событий генерируются на странице:

<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> 

.. с DatePicker виджета прилагается:

$(".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]); 
    } 
}); 

Мне нужна функция, которая добавит в сНу ид = «событие» после последнего сНу класса = «событие» другой DIV класс = «событие», где N является следующим индексом и прикрепить Datepicker виджета выше нового поле ввода с классом = «датой», как:

<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> 

Спасибо.

Answer 1

Я думаю, что я получил это :)

var idx = $("div.event").length; 

    var wrapper = $('<div>').attr('class','event'); 

    addEventDate(wrapper, "startDate", idx); 

    wrapper.insertAfter("div.event:last"); 

    function addEventDate(wrapper, prefix, idx) { 

     $('<input>').attr({ 
      name: 'event[' + idx + '].' + prefix', 
      id: 'event' + idx + '_' + prefix', 
      type: 'text', 
      'class': 'date' 
     }).appendTo(wrapper); 


     $('<input>').attr({ 
      name: 'event[' + idx + '].' + prefix + '_day', 
      id: 'event' + idx + '_' + prefix + '_day', 
      type: 'hidden', 
      value: '' 
     }).appendTo(wrapper); 

     $('<input>').attr({ 
      name: 'event[' + idx + '].' + prefix + '_month', 
      id: 'event' + idx + '_' + prefix + '_month', 
      type: 'hidden', 
      value: '' 
     }).appendTo(wrapper); 

     $('<input>').attr({ 
      name: 'event[' + idx + '].' + prefix + '_year', 
      id: 'event' + idx + '_' + prefix + '_year', 
      type: 'hidden', 
      value: '' 
     }).appendTo(wrapper); 
    }