JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input type="button" id="btnAdd" name="btnAdd" value="Add..." /><input type="button" id="btnCheck" name="btnCheck" value="Check All" />
    <br/><input type="file" name="url_1" id="url_1" multiple="multiple" />
</form>

JavaScript

$(function() {    
    $("#btnAdd").click(function(e) {
        
        //HACK to get the html of the selected element
        //basically same as .outerHTML that is available in IE
        var html = $("#url_1").wrap("<div>").parent().html();
        $("#url_1").unwrap();
        
        //create the new element html and
        //dynamically replace the id / name suffix w/ auto
        //increasing number based on the number of similar input
        //count + 1 as the control index in the suffix.
        var count = $("input[id^='url_']").size() + 1;        
        html = html.replace(/url_1/gi,"url_" + count);
        
        //dynamically insert the new element
        $("input[id^='url_']:last").after("<br/>" + html);
        
    });
    
    //Just to test that correct id/name are assigned to all
    //the controls (both static & dynamic ones)
    $("#btnCheck").click(function(e) {
        $("input[id^='url_']").each(function() {
            alert($(this).attr("id"));
        });
    });
});