JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <label for="myfile">select 1</label>
    <input id="myfile" type="file" />
</div>
<div>
    <label for="myfile">select 2</label>
    <input id="myfile" type="file" />
</div>
<div>
    <label for="myfile">select 3</label>
    <input id="myfile" type="file" />
</div>

CSS

input {
   display: none;
}

JavaScript

var activateFileSelection = function (container) {
    var container = container || $('body');
    container.find(':file').each(function (i) {
        var thisInput = $(this);
        var thisLabel = thisInput.siblings('label');
        if (thisLabel.length > 0 && !thisLabel.hasClass('file-input-label')) {
            var thisLabelDefaultText = thisLabel.html();
            thisLabel.addClass('file-input-label');
            thisLabel.on("click", function (e) {
                thisInput.trigger("click");
                e.preventDefault() 
            });
            thisInput.on('change',thisLabel, function () {
                console.log("Input used: " + thisInput.data("field"));
                if (thisInput.val()) {
                    thisLabel.html(thisInput.val());
                } else {
                    thisLabel.html(thisLabelDefaultText);
                };
            });
        };
    });
};
activateFileSelection();