I've made a "more" button and whenever i click it, another upload input will be displayed. Problem is, once I add the <div>, then it stops working. Is there any way around this?

<html>
    <head>
    <script type="text/javascript">
    var instance = 1;
     
    function newUpload()
    {
    instance++;
    var newInput = document.createElement("INPUT");
    newInput.size = "12";
    newInput.name = "regPictures" + instance;
    newInput.type = "file";
    newInput.style.display = 'block';
    element = document.getElementById("btnAdd");
    document.getElementById("he").insertBefore(newInput, element);
    }
    </script>
    </head>
    <body>
    <form id="he">
    <div>
    <input name="regPictures1" type="file" size="12"/>
     
    <br/>
    <input type="button" id="btnAdd" value="More" onclick="newUpload();" />
    </div>
    </form>
    </body>
    </html>

set id for DIV not for FORM, as i did in following code

<form >
    <div id="he">
    <input name="regPictures1" type="file" size="12"/>
 
    <br/>
    <input type="button" id="btnAdd" value="More" onclick="newUpload();" />
    </div>
    </form>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.