creating clones of input fields in jquery and updating field ids

Question

I am trying to dynamically add input fields, which I am able to do. But I am not sure how to go about adding a new name to the input fields. I want it to be an incrementing number. So the first group of input fields would be input1 and each clone that is created increments the number: input1, input2, input3 etc. Does anyone have any idea how I could go about doing this? Here is the jsfiddle: http://jsfiddle.net/liveandream/Xs7m8/

And here is my 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" />

And my Jquery:

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

Thank you in advance for anyone willing to help!!

Answer 1

(removed my initial answer - overlooked the existing ids in your HTML)

You could group the post results by room.

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