JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fileselector">
                                <span id="ccu-row-1">
                                <button id="ccu-add-1" class="ccu-button">Add File</button>
                                <button id="ccu-del-1" class="ccu-button hide">Remove File</button>
                                <span id="ccu-label-1" class="ccu-label">None selected</span>
                                <input type="file" name="file[]" id="file1" class="ccu-file"><br/>
                                </span>
                                
                                <span id="ccu-row-2" class="hide">
                                <button id="ccu-add-2" class="ccu-button">Add File</button>
                                <button id="ccu-del-2" class="ccu-button hide">Remove File</button>
                                <span id="ccu-label-2" class="ccu-label">None selected</span>
                                <input type="file" name="file[]" id="file2" class="ccu-file"><br/>
                                </span>
                                
                                <span id="ccu-row-3" class="hide">
                                <button id="ccu-add-3" class="ccu-button">Add File</button>
                                <button id="ccu-del-3" class="ccu-button hide">Remove File</button>
                                <span id="ccu-label-3" class="ccu-label">None selected</span>
                                <input type="file" name="file[]" id="file3" class="ccu-file"><br/>
                                </span>
                            </div>

CSS

.hide { display:none; }
.ccu-file {
    /*position: absolute;
    margin-top: -4000px;
    opacity: 0;*/
}

JavaScript

function loadFile(num) {
        // duplicate check
        //alert("load file function");
        $('#ccu-label-' + num).html('File selected');
        $("#ccu-add-" + num).hide();
        $("#ccu-del-" + num).show();
        if (num !== "3") {
             var newnum = parseInt(num) + 1;
             $("#ccu-row-" + newnum).show();
        }
    }

function clearFile(num) {
        if ($.browser.msie) {
            // IE (<= 9) doesn't clear file inputs; replace with empty clone instead
            var p = $('#ccu-row-' + num).html(); 
            $('#ccu-row-' + num).html('');
               $('#ccu-row-' + num).html(p);

        } else {
            $('#file' + num).val('');
        }
        if (num == "2" && $('#file3').val() == '') {
            $("#ccu-row-3").hide();
        }
        if (num == "1" && $('#file2').val() == '') {
            $("#ccu-row-2").hide();
        }
        $("#ccu-add-" + num).show();
        $("#ccu-del-" + num).hide();
    $('#ccu-label-' + num).html("None selected");$("#ccu-add-1").click(function(event) {
        
        event.preventDefault();
        $('#file1').click();
    });
    $('#file1').change(function(click) {
        loadFile('1');
    });
    $("#ccu-add-2").click(function(event) {
        event.preventDefault();
        $('#file2').click();
    });
    $('#file2').change(function(click) {
        loadFile('2');
    });
    $("#ccu-add-3").click(function(event) {
        event.preventDefault();
        $('#file3').click();
    });
    $('#file3').change(function(click) {
        loadFile('3');
    });
    
    // remove file button
    $("#ccu-del-1").click(function(event) {
        event.preventDefault();
        clearFile('1');
    });
    $("#ccu-del-2").click(function(event) {
        event.preventDefault();
        clearFile('2');
    });
    $("#ccu-del-3").click(function(event) {
        event.preventDefault();
        clearFile('3');
    });



    }

// add file...