I start with this markup:

<div>

  <span>

    <label for=Item[0]>Item #1</label>

    <input type=text value= name=Item id=Item[0]/>

  </span>

</div>

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

<div>

  <span>

    <label for=Item[0]>Item #1</label>

    <input type=text value= name=Item id=Item[0]/>

  </span>

</div>

<div>

  <span>

    <label for=Item[1]>Item #2</label>

    <input type=text value= name=Item id=Item[1]/>

  </span>

</div>

I'm trying to use this javascript:

 $(document).ready(function(){



    var count = <%= Items.Count - 1 %>;



    $('#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);

    });

});

So a few issues:

Appending the label works, but my cloned textbox does not.

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

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

$('#ItemFields').append('<div><span>' + label + tb + '</span></div>');

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.