Trouble with cloning in jQuery
<p>In a form that needs a variant number of band members I am using the following code on a button to duplicate an input.</p>

<p>A snippet of the HTML is this:</p>

<pre><code>&lt;div id="input1" style="margin-bottom:4px;" class="clonedInput"&gt;
    &lt;label for="band_member"&gt;Band Member: &lt;/label&gt;
    &lt;input type="text" name="name1" id="name1" /&gt;
&lt;/div&gt;
&lt;div&gt;
    &lt;input type="button" id="btnAdd" value="  add another member  " /&gt;
&lt;/div&gt;
</code></pre>

<p>And this jquery is in the document ready function:</p>

<pre><code>$('#btnAdd').click(function() {
var num = $('.clonedInput').length;
var newNum  = new Number(num + 1);
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
newElem.children(':first').attr( 'val', '' ).attr('id', 'name' + newNum).attr('name', 'name' + newNum);
$('#input' + num).after(newElem);
$("#band_member_count").val( newNum );             
}); // end btnAdd click
</code></pre>

<p>When the form is submitted, the added inputs aren't being submitted with the last entry becoming the value of the first input and the value of each newly added input is not being cleared like the code indicates.</p>

<p>I would greatly appreciate any assistance with this.</p>

<p>Thanks in advance,
Jon</p>
