Dynamically add extra input fields to html form

I am currently working on an html and php project. What I want to be able to do is to have an html with a file chooser for selecting a screenshot. Next to the file chooser will be a button/link for the user to be able to add another field. When the user clicks on the button or link I want another field to be added to the form underneath the first field, then the user can press the button/link again and another field is added all. Then when the form is submitted it gets the value of all the input fields including all the files to be uploaded that were added to the form.

What is the best method to achieve this, I assume javascript and/or jquery might be involved.

Thanks for any help you can provide.

UPDATE I have found out how to do it but I was wondering instead how to make it fade in or make it smoothly slide the rest of the form down. I have added the fields insi开发者_运维问答de a div and done javascript that makes the input field appear inside this div but it just appears, I want it to have a smooth fade in animation instead of it just flashing up on the screen. Below is the javascript that I have used to add the input field

<script>
        function addFields()
        {
            document.getElementById("screenshotFields").innerHTML += "<input class=\"fields\" type=\"file\" name=\"filScreenshot[]\" />";
        }
    </script>

---

You want something that this tutorial calls 'Multiple File Upload Magic'.

---

The answer was from @ott comment to my question to another stackoverflow question