JSFiddle - React, Tailwind, and code Playground

HTML

<div class="upload-area text-center ml-4 py-4" id="dropContainer">
  <i class="fa fa-upload mt-4 mb-2" style="font-size:50px"></i>
  <p class=" mt-1" id="uploadText" style="font-size:18px">Upload file / drag file
    here</p>
</div>
<ul class="list-group ml-4" id="attList">
  <li class="border-0 bg-transparent" style="list-style-type: none;">
    <input id="fileInput" value="%attachments%" type="file" name="attachment_0" class="attachment" />
  </li>
</ul>

CSS

.upload-area {
  border: 1px solid black;
  transition: transform .1s;
  /* Animation */
  border-radius: 3px;
  color: #0A5E58;
}

.upload-area:hover {
  cursor: pointer;
}

#fileInput {
  display: none;
}

.onHover {
  border: solid 3px #0A5E58;
  transition: transform .2s;
  /* Animation */
  transform: scale(1.1);

JavaScript

dropContainer.ondragover = dropContainer.ondragenter = function(evt) {
   evt.stopPropagation();
   evt.preventDefault();
   $("#uploadText").text("Drop file");
   $(".upload-area").addClass("onHover");
 };

 dropContainer.ondrop = function(evt) {
   fileInput.files = evt.dataTransfer.files;

   const dT = new DataTransfer();
   dT.items.add(evt.dataTransfer.files[0]);
   dT.items.add(evt.dataTransfer.files[3]);
   fileInput.files = dT.files;

   evt.stopPropagation();
   evt.preventDefault();
 };

 window.addEventListener("drop", function(e) {
   e = e || event;
   $(".upload-area").removeClass("onHover");
   $("#uploadText").text("Upload file / drag file here");
   e.stopPropagation();
   e.preventDefault();
 }, false);

 $('.upload-area').on('dragover', function(e) {
   e.stopPropagation();
   e.preventDefault();
   $("#uploadText").text("Drop file");
   $(".upload-area").addClass("onHover");
 });

 $('.upload-area').on('dragleave', function(e) {
   e.stopPropagation();
   e.preventDefault();
   $("#uploadText").text("Upload file / drag file here");
   $(".upload-area").removeClass("onHover");
 });

 $('.upload-area').on('click', function() {

   $("#attList li:first-child input")[0].click();
 });

 $(document).ready(function() {
   $('#attList').on('change', '.attachment', function() {
     var currentInput = $(this);
     var inputName = currentInput.attr('name');
     var filename = currentInput.val().replace(/C:\\fakepath\\/i, '');
     currentInput.css('display', 'none');
     $('<li>' + filename + '<button type="button" class="remove ml-2 remove btn btn-danger btn-sm">Delete</button></li>').insertBefore(currentInput);

     var idsInput = $('#attachment_ids');
     var ids = idsInput.val();
     if (ids != '')
       idsInput.val(ids + ',' + inputName);
     else
       idsInput.val(inputName);

     var number;
     var arr = inputName.split('_');
     if (arr.length > 1)
       number = parseInt(arr[1]);
     number += 1;

     $('<li class="mb-1"...