Erstellen von Klonen von Eingabefeldern in jquery und Aktualisieren von Feld-IDs

Question

Ich versuche, Eingabefelder dynamisch hinzuzufügen, was ich tun kann. Aber ich bin mir nicht sicher, wie ich den Eingabefeldern einen neuen Namen hinzufügen soll. Ich möchte, dass es eine fortlaufende Nummer ist. Also wäre die erste Gruppe von Eingabefeldern input1 und jeder erzeugte Klon erhöht die Zahl: input1, input2, input3 usw. Hat jemand eine Idee, wie ich das machen könnte? Hier ist die jsfiddle: http://jsfiddle.net/liveandream/Xs7m8/

Und hier ist mein Code:

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

Und mein JQuery:

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

Vielen Dank im Voraus für alle bereit zu helfen! !

Answer 1

(entfernt meine erste Antwort - übersehen, die bestehenden IDs in Ihrem HTML)

Sie können die post-Ergebnisse von Raumgruppe.

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 
    }); 
});