JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <label id="huf1-label">fileGroup 1</label>
    <input type="file" id="fileElem" accept="image/*" style="display:none"
           onchange="handleFiles(this.files)" name="file">
    <a href="#" id="fileSelect" class="c1-button right gray" tabindex="0">Select
        File to
        Upload<span class="icon-checkmark"></span> </a>
</div>
<div>
    <label id="huf1Btn-label">
        <div class="fileInfoContainer">
            <ul>
                <li>
                    <div id="fileList" class="fileInfoContainer">
                    </div>
                </li>
            </ul>
        </div>
    </label>
    <button id="removeFile1" class="c1-button red left-icon"
            aria-controls="huf1">
        <span class="icon-remove"></span><b> Cancel</b>
        <span class="hidden">fileGroup 1</span>
    </button>
    <div class="filename"></div>
</div>

JavaScript

window.URL = window.URL || window.webkitURL;
    //BEGIN - fileSelect1 and handleFile
    var fileSelect = document.getElementById("fileSelect"),
            fileElem = document.getElementById("fileElem"),
            fileList = document.getElementById("fileList");

    fileSelect.addEventListener("click", function (e) {
        if (fileElem) {
            fileElem.click();
        }
        e.preventDefault(); // prevent navigation to "#"
    }, false);
    function handleFiles(files) {
        if (!files.length) {
            fileList.innerHTML = "<p></p>";
        } else {
            $('#fileList').empty().append();
            var list = document.createElement("ul");
            for (var i = 0; i < files.length; i++) {
                var li = document.createElement("li");
                list.appendChild(li);
                var info = document.createElement("span");
                info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
                li.appendChild(info);
            }
            fileList.appendChild(list);
            $("#removeFile1").click(function (event) {
                event.preventDefault();
                $("#fileList").empty();
                $("#removeFile1").find('b').html('Cancel');
                $('#fileElem').each(function() {
                    $(this).val();
                });
                document.getElementById("fileElem").value = "";
                document.getElementById("fileSelect").value = "";

                console.log('#fileList' + 'was deleted');
                console.log('#fileElem' + 'was deleted I hope');
                //  console.log($(this)+'#fileList'.val());
            });

        }
    };
 $("#fileElem").change(function(){
        if (this.val == "" ) {
            $("#removeFile1").find('b').html('Cancel');
        }  else {
            $("#removeFile1").find('b').html('Remove this file');
            }
    });
    
    
 $(function() {
     $("input:file").change(function...