I am trying to add multiple div tags within a form using JQuery:

Below is my initial HTML form:

<form action="" method="post">
            <div id="div_file0">
             <input type="file" name="files0[]" id="files0" multiple><br/>
            </div>
             <a href="#" id='more_files'>Click to add more files</a>
             After uploading multiple files, click Submit.<br>
             <input type="submit" value="Submit">
</form>

Upon clicking on Click to add more files, I want more div tags to be created as below:

<form action="http://localhost:5000/api/upload_file" method="post">
            <div id="div_file0">
             <input type="file" name="files0[]" id="files0" multiple=""><br>
            </div>
            <div id="div_file1">
             <input type="file" multiple="" id="files1" name="files1[]"><a class="remove" href="#" id="remove_file" name="remove_file1" value="1">Remove file</a>
            </div>

             <a href="#" id="more_files">Click to add more files</a>
             After uploading multiple files, click Submit.<br>
             <input type="submit" value="Submit">
        </form>

However, the new div tag replaces the existing content, and adds the new and old input tags within newly created div element.

<form action="http://localhost:5000/api/upload_file" method="post">
            <div id="div_file1">
             <input type="file" name="files0[]" id="files0" multiple=""><br>
             <input type="file" multiple="" id="files1" name="files1[]"><a class="remove" href="#" id="remove_file" name="remove_file1" value="1">Remove file</a>
            </div>

             <a href="#" id="more_files">Click to add more files</a>
             After uploading multiple files, click Submit.<br>
             <input type="submit" value="Submit">
        </form>

Javascript used is as below:

<script type="text/javascript">
            $(document).ready(function() {
                $(document).on('click','#more_files', function() {
                var numOfInputs = 1;
                while($('#files'+numOfInputs).length) { numOfInputs++; }//once this loop breaks, numOfInputs is greater than the # of browse buttons
                console.log("numOfInputs:"+numOfInputs)
                $("<br/>").insertAfter("#div_file"+(numOfInputs-1));
                $("div")
                .attr("id","div_file"+numOfInputs)
                .insertAfter("#div_file"+(numOfInputs-1));

                var input = $("<input type='file' multiple/>")
                .attr("id", "files"+numOfInputs)
                .attr("name", "files"+numOfInputs+"[]");

                var remove = $("<a class='remove' href='#'>Remove file</a>")
                .attr("id","remove_file")
                .attr("name","remove_file"+numOfInputs)
                .attr("value",numOfInputs);

                $("#div_file"+numOfInputs).append(input,remove)
                });
            });
        </script>