Question

Is it possible?
I want a user to post an array full of 1-5 pieces of data.

At first there would be only one text field on show, but on clicking a ‘plus’ icon next to it, it would create another text field below it for more user input.

I would also want to have a delete icon next to text boxes 2-5, to remove them if necessary.

My JQuery knowledge is limited, and I can work out how to append text boxes to a list, but not to keep track of them/delete them. Ideally I would also want to pass them as an array to php, so I can easily loop through them.

<input type="text" size="15" maxlength="15" name="1"><img src="add.png" onclick="add();">
<!-- Below is hidden by default, and each one shows on click of the add image -->
<input type="text" size="15" maxlength="15" name="2"><img src="delete.png" onclick="delete(2);">
<input type="text" size="15" maxlength="15" name="3"><img src="delete.png" onclick="delete(3);">
<input type="text" size="15" maxlength="15" name="4"><img src="delete.png" onclick="delete(4);">
<input type="text" size="15" maxlength="15" name="5"><img src="delete.png" onclick="delete(5);">

Answer 1

jQuery clone() is very handy for this. A small example how it could be done (working example on jsfiddle)

<ul>
    <li><input type="text" name="textbox[]" /></li>
</ul>
<input type="button" id="addTextbox" value="Add textbox" />
<script type="text/javascript">
$(function(){
    $('#addTextbox').click(function(){
        var li = $('ul li:first').clone().appendTo($('ul'));

        // empty the value if something is already filled in the cloned copy
        li.children('input').val('');
        li.append($('<button />').click(function(){
            li.remove();
            // don't need to check how many there are, since it will be less than 5.
            $('#addTextbox').attr('disabled',false);
        }).text('Remove'));

        // disable button if its the 5th that was added
        if ($('ul').children().length==5){
            $(this).attr('disabled',true);
        }
    }); 
});

</script>

For the server-side part, you could then do a foreach() loop through the $_POST[‘textbox’]