Only last text input array sends to php processing script

Question

I am trying to dynamically add fields with jquery for a project. My problem is that when I send the form to the processing script and do a print_r() on the $_POST['item'] it only lists the last array...

Here is my code:

<div class="itemAdd row">
                            <div class="span4">
                                <p>Item Number: <br /><input class="span4" type="text" name="item[itemNumber]" /></p>
                                <p>Status: <br />
                                <select name="item[status]" class="span4">
                                    <option value="enabled" selected="selected">Enabled</option>
                                    <option value="disabled">Disabled</option>
                                    <option value="damaged">Damaged</option>
                                </select>
                                </p>
                            </div>
                            <div class="span4">
                                <p>Item Notes:<br /><textarea class="span4" style="height:100px;" name="item[notes]"></textarea></p>
                            </div>
                            <div class="clearfix"></div>
                            <hr />
                        </div>

This button adds new fields:

<a href="#" class="btn btn-small btn-primary" id="addItem"><i class="icon-plus icon-white"></i> Add Item</a>

Here is the jquery to add new fields:

<script>
//Add Items
$('a#addItem').on('click', function(event) {

    event.preventDefault();
    $('#productItems').append('<div class="itemAdd row"><div class="span4"><p>Item Number: <br /><input class="span4" type="text" name="item[itemNumber]" /></p><p>Status: <br /><select name="item[status]" class="span4"><option value="enabled" selected="selected">Enabled</option><option value="disabled">Disabled</option><option value="damaged">Damaged</option></select></p></div><div class="span4"><p>Item Notes:<br /><textarea class="span4" style="height:100px;" name="item[notes]"></textarea></p></div><div class="clearfix"></div><hr /></div>');

});

Answer 1

You are using arrays in your html, but the index is a string:

item[itemNumber]

So every item will overwrite the previous one.

You could change it to:

itemNumber[]

and

itemNote[]

or, if you have a numeric ID, you could use that.

Answer 2

You're forcing array keys in your form fields, et.c.:

... name="item[itemNumber]" ...

itemNumber isn't a JS var, it's literal html/attribute text in the html blob you're appending. Perhaps you meant something more like

... name="item[' + itemNumber + ']" ...

instead. Even just item[] would allow PHP to assign array keys for you automatically. But as it stands now, PHP will create an array for you, but since all your fields are using the SAME key names, you'll be continually overwriting values and end up with only the last field name/key-pair in the form.