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>

• Rory McCrossan: This whole things seems entirely redundant as you're using a multiple file input...?
• Ashwin Geet D'Sa: I need multiple input file, and from different locations as well.
• Ashwin Geet D'Sa: And to provide an ability to remove accidentally inserted file.
• Rory McCrossan: That's what multiple does for you without needing any JS. In either case I've added an answer below showing you how to clone the content.

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>

• Ashwin Geet D'Sa: It works, Need to wait for 7 mins before I accept the answer!
• Ashwin Geet D'Sa: However, wanted to clarify, what's 'form a' in this case?
• Rory McCrossan: The a element within the form; the Click to add more files link