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>

CSS

div{display:block;width:170px;height:60px;overflow:hidden;}

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

.hidden_uploaders{font-size:50px;width:120px;opacity:0;filter:alpha(opacity:0); position:relative;top:-40px;left:-20px;background:yellow;z-index:-1;}
#real_uploader_1{z-index:2;}

JavaScript

var global_cnt = 1;

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

$('div').click(function(){
	if ( $('real_uploader_' +global_cnt).length ) $('real_uploader_' +global_cnt).css('z-index','-1');
	global_cnt++;
	if ( $('real_uploader_' +global_cnt).length ) $('real_uploader_' +global_cnt).css('z-index','2');
});