Appending multiple items using jQuery
<p>I start with this markup:</p>

<pre><code>&lt;div&gt;
  &lt;span&gt;
    &lt;label for="Item[0]"&gt;Item #1&lt;/label&gt;
    &lt;input type="text" value="" name="Item" id="Item[0]"/&gt;
  &lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>On each button click I want to add another section exactly as the one above but with an incremented index.</p>

<pre><code>&lt;div&gt;
  &lt;span&gt;
    &lt;label for="Item[0]"&gt;Item #1&lt;/label&gt;
    &lt;input type="text" value="" name="Item" id="Item[0]"/&gt;
  &lt;/span&gt;
&lt;/div&gt;
&lt;div&gt;
  &lt;span&gt;
    &lt;label for="Item[1]"&gt;Item #2&lt;/label&gt;
    &lt;input type="text" value="" name="Item" id="Item[1]"/&gt;
  &lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p>I'm trying to use this javascript:</p>

<pre><code> $(document).ready(function(){

    var count = &lt;%= Items.Count - 1 %&gt;;

    $('#AddItem').click(function(e) {
        e.preventDefault();
        count++;

        var tb = $('#Item[0]').clone().attr('id', 'Item[' + count + ']');

        var label = document.createElement('label')
        label.setAttribute('For', 'Item[' + count + ']')

        $('#ItemFields').append(label);
        $('#ItemFields').append(tb);
    });
});
</code></pre>

<p>So a few issues:</p>

<p>Appending the label works, but my cloned textbox does not.</p>

<p>The label has no text. I can't seem to find the property for that. Can anyone tell me what it is?</p>

<p>I can't figure out how to wrap the label and textbox together in a div and span. If I try</p>

<pre><code>$('#ItemFields').append('&lt;div&gt;&lt;span&gt;' + label + tb + '&lt;/span&gt;&lt;/div&gt;');
</code></pre>

<p>it outputs [object HTMLLabelElement] instead of the actual label. If I try to split them up into multiple append statements, it self terminates the div and span. I'm new to jQuery/Javascript, so I'm not quite sure what I'm doing wrong.</p>
