$_Files[] array only showing first file uploaded

Question

I currently have a form with a single file upload input on it.

the original form input I've tried
<input type="file" name="userFile[]" />
and
<input type="file" name="userFile1" />

I also have a link to generate more input fields using

If have tried methods of:
a)
counter = 1;
function addInput(){
counter ++;
$('#divName').append('<input type="file" name="userFile[]" ' />);
}

b)
var counter = 1;
function addInput(){
counter++;
$('#divName').append('<input type="file" name="userFile'+counter+'" ' />);
}

I don't think the issue is JS related here but possibly the server I think.

The issue is that when I finally press the Submit button and pass the files to the server and try to access all the $_FILES['userFile']['name']/['size']/['error'] etc values, only the very first original form upload values can be echoed/printed. I tried uploading large size files for testing I know that all files are getting uploaded but once it gets to the server side, only one can be accessed.

Can anyone give me a point as to what might be going on? I hope I explained this right, ask me any questions if you need clarification.

more info

after some more testing it looks like Jquery might be the issue after all. In the above method mentioned of duplicating the fields, only the first original input is recognized when the files are uploaded.

But if I create three original input fields and upload to them as normal then all files in the $_FILES array are recognized as they should be.

So why are the jQuery generated fields not posting in the form?

Answer 1

I found this post and then found the answer which was quite simple sadly.

http://stackoverflow.com/questions/3847492/jquery-not-post-all-input-of-a-form-after-the-append

I just had to move the <form> element outside the Table with my inputs and then it all worked. I'm not sure why but it is interesting. Thank you for those that helped.