Adding elements one after another using JQuery

Question

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>

Answer 1

This rather redundant as you're using a multiple file input already.

If you really want to do it in this manner, then remove all id attributes from the HTML content you're going to repeat in the DOM. They aren't necessary and just create more needless complication. Then you can grab the first .div_file element, clone it, and insert it before the a in the form, like this:

$(document).ready(function() {
  $(document).on('click', '#more_files', function() {
    var $clone = $('.div_file:first').clone();
    $clone.insertBefore('form a');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post">
  <div class="div_file">
    <input type="file" name="files[]" 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>