JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <form>
        <input type="file" id="form1_field1"/>
        <input type="submit" value="Make it so" id="form1_field2"/>
    </form>
</div>

CSS

input[type="file"] {
    border:1px dotted #000;
}

JavaScript

$('div').delegate('input[type="submit"]', 'click', function() {
    var formClone = $('form:first-child').clone();

    formClone.find('input').each(function(i) {
        $(this).attr('id', $(this).attr('id').replace(/form(\d+)/, function(fullMatch, n) { return 'form'+(Number(n)+1); }));
    });
    var thisForm = $(this).closest('form');
    $('div').append(formClone).children(':last').hide().fadeIn(1500);
 
    // do ajax post here (faking the "upload time" with a timeout)
    // but really the "hideFinishedForm" method body needs to
    // go in the upload success callback
    window.setTimeout(hideFinishedForm, 5000, thisForm);

    return false;
});


function hideFinishedForm(formToRemove) {
    $(formToRemove).remove();
    
    // now submit the next form
    $('form input[type="submit"]').trigger('click');
}