JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <input type="button" id="clicker" value="Upload File" />
    <input type="file" class="hidden_uploaders" id="real_uploader_1" name="upload_1" />
    <input type="file" class="hidden_uploaders" id="real_uploader_2" name="upload_2" />
    <input type="file" class="hidden_uploaders" id="real_uploader_3" name="upload_3" />
</div>

<div id="tst">If visible, js is broken</div>

CSS

body,html{position:relative;}
div{position:relative;display:block;width:100%;height:600px;overflow:hidden;}

#clicker{width:150px;height:50px;position:relative;top:-5px;left:-5px;z-index:1;}

.hidden_uploaders{position:absolute;left:-50px;font-size:34px;width:200px;z-index:-1;}
xxx.hidden_uploaders{opacity:0;filter:alpha(opacity:0);}

#real_uploader_1{z-index:2;}

#real_uploader_1{border:1px solid red;}
#real_uploader_2{border:1px solid blue;}
#real_uploader_3{border:1px solid green;}

#tst{position:absolute;top:250px;left:80%;height:50px;width:120px;text-align:center;background:yellow;border:1px solid orange;}

JavaScript

$('#tst').hide();

var xx, global_cnt = 1;

$('#clicker').button(); //use jQueryUI to auto-style the button

$('div').click(function(){
    alert(global_cnt);
    xx = global_cnt * 60;
    $('#real_uploader_' +global_cnt).css({'position':'absolute','top':xx+'px'});
    global_cnt++;

    if ( $('#real_uploader_' +global_cnt).length ){
        $('#real_uploader_' +global_cnt).css('z-index','2');
    }
});