создание клонов полей ввода в jquery и обновление полей полей

Question

Я пытаюсь динамически добавлять поля ввода, которые я могу сделать. Но я не уверен, как добавить новое имя в поля ввода. Я хочу, чтобы он увеличивался. Таким образом, первая группа полей ввода будет input1, и каждый созданный клон будет увеличивать число: input1, input2, input3 и т. Д. Кто-нибудь знает, как я могу это сделать? Вот jsfiddle: http://jsfiddle.net/liveandream/Xs7m8/

И вот мой код:

HTML:

<form action="#" method="post"> 
<div class="avail"> 
     <div class="roomType"> 
      <p>Tipo de Habitación:<br /> 
     <input type="text" name="roomType" /></p></div> 
     <div class="roomType"> 
      <p><span class="small">Fecha de inicio:</span><br /> 
     <input type="text" name="Date1" /></p></div> 
     <div class="roomType"><p><span class="small">Fecha de Termino:</span><br /> 
     <input type="text" name="Date2" /></p></div> 
     <div class="roomType"> 
      <p>Tarifa:<br /> 
     <input type="text" name="roomRate" /></p></div><br clear="all" /> 
</div> 
<input type="submit" value="+" id="copy" /> 
<input type="submit" value="Add to Database" name="add" /> 

И мой Jquery:

$("#copy").click(function(e) { 
     $(".avail").clone().removeAttr('id').insertBefore(this); 
     e.preventDefault(); 
    }); 

Спасибо заранее за тех, кто готов помочь! !

Answer 1

(удалил свой первоначальный ответ - игнорировать существующие идентификаторы в вашем HTML)

Вы могли бы сгруппировать почтовые результаты по комнате.

results = {}; 
$('form').submit(function(e) { 
    e.preventDefault(); // prevent automatic submitting 

    $('.avail').each(function(index) { 
     // Here your have the gather the fields and values in result array; 

     results['room'+index] = result; // add array with results of one room to result 
    }); 

    // Post the result 
    $.post($(this).attr('action'), results, function(result) { 
     // callback 
    }); 
});