JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <body>
        <form action="#" method="POST" enctype="multipart/form-data">
            <input type="file" name="file1" /><br />

            <input type="submit" value="Upload Forms" />
        </form>
    </body>
</html>

JavaScript

var incr = 2;

function input_change() {
    if ( jQuery(this).attr('value') == '' ) {
       
        var input    = jQuery(this).parent().find('input[type="file"]');
        var victim;
        var num_empty = 0;

        input.each(function() {
            if ( jQuery(this).attr('value') == '' ) {
                victim = this;
                num_empty++;
            }
        });

        if ( num_empty > 1 ) {
            victim = jQuery(victim);

            victim.next().remove();        // remove line break
            victim.remove();            // remove input
            incr--;
        }
    } else {
        
        if ( jQuery(this).parent().find('input[type="file"]:empty').length <= 1 ) {       
            $('input[type=file]:last').after('<input type="file" name="file' + incr + '" />');
        }
    }
}



$(document).ready(function(){
    jQuery('input[type="file"]').live('change',function(){
         input_change(this);   
    });
});