JSFiddle - React, Tailwind, and code Playground

HTML

<form method="POST" enctype="multipart/form-data">
    <input type="hidden" name="file_count" id="file_count" value="0" />
    <table id="files_table" border="0" cellpadding="0" cellspacing="0">
        <tr id="new_file_row">
            <td>
                <input type="file" name="new_file[0]" id="new_file[0]"  onchange="add_new_file(this)" />
            </td>
            
            
        </tr>
    </table>
</form>

JavaScript

function add_new_file(field)
{
    // Get the number of files previously uploaded.
    var count = parseInt(document.getElementById('file_count').value);
    
    // Get the name of the file that has just been uploaded.
    var file_name = document.getElementById("new_file["+count+"]").value;
    
    // Hide the file upload control containing the information about the picture that was just uploaded.
    document.getElementById('new_file_row').style.display = "none";
    document.getElementById('new_file_row').id = "new_file_row["+count+"]";
    
    // Get a reference to the table containing the uploaded pictures.        
    var table = document.getElementById('files_table');
    
    // Insert a new row with the file name and a delete button.
    var row = table.insertRow(table.rows.length);
    row.id = "inserted_file["+count+"]";
    var cell0 = row.insertCell(0);
    cell0.innerHTML = '<input type="text" disabled="disabled" name="inserted_file['+count+']" value="'+file_name+'" /><input type="button" name="delete['+count+']" value="Delete" onclick="delete_inserted(this)"/>';
    
    // Increment count of the number of files uploaded.
    ++count;
    
      
    
    // Update the value of the file hidden input tag holding the count of files uploaded.
    document.getElementById('file_count').value = count;
}

 function delete_inserted(field)
{
    // Get the field name.
    var name = field.name;
    
    // Extract the file id from the field name.
    var id = name.substr(name.indexOf('[') + 1, name.indexOf(']') - name.indexOf('[') - 1);
    
    // Hide the row displaying the uploaded file name.
    document.getElementById("inserted_file["+id+"]").style.display = "none";
        
    // Get a reference to the uploaded file control.
    var control = document.getElementById("new_file["+id+"]");
    
    // Remove the new file control.
    control.parentNode.removeChild(control);
}