JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form1" name="upload" enctype="multipart/form-data">
        <p id="upload-area">
            <input id="File1" type="file" onchange="fileUpload(value)" /> 
        </p>
        <p>
            <input id="AddFile" type="button" value="Add file" onclick="addFileUploadBox()" /> 
            <button ID="btnSubmit" Text="Upload Now" OnClick="btnSubmit_Click">File Upload</button>
        </p>
</form>

JavaScript

function addFileUploadBox() {
                if (!document.getElementById || !document.createElement){
                     return false;
                }
               

                var uploadArea = document.getElementById("upload-area");

                if (!uploadArea){
                        return;
                }
                

                var newLine = document.createElement("br");
                uploadArea.appendChild(newLine);

                var newUploadBox = document.createElement("input");

                // Set up the new input for file uploads
                newUploadBox.type = "file";

                // The new box needs a name and an ID
                if (!addFileUploadBox.lastAssignedId){
                    
                    addFileUploadBox.lastAssignedId = 100;
                }

                newUploadBox.setAttribute("id", "dynamic" + addFileUploadBox.lastAssignedId);
                newUploadBox.setAttribute("name", "dynamic:" + addFileUploadBox.lastAssignedId);
                newUploadBox.setAttribute("onchange", "javascript:fileUpload(value)");
				
                newUploadBox.className = "multi"
                uploadArea.appendChild(newUploadBox);
                addFileUploadBox.lastAssignedId++;
            } 

 function fileUpload(value) {
    //do something
     alert(value)
 }