JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" data-toggle="modal" id="open-modal-button" data-target="#delete-file-modal">Open modal</button>
<div class="modal fade" id="delete-file-modal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">

      <form class="form-horizontal" method="post" id="delete_file_form">


        <div class="modal-body">

          Are you sure you want to delete this file?

        </div>

        <div class="modal-footer">

          <button data-dismiss="modal" class="btn btn-danger" name="in_confirm_insert" id="confirm-delete-button">Delete</button>
          <button data-dismiss="modal" class="btn btn-default" name="in_confirm_insert" id="cancel-delete-button">Cancel</button>

        </div>

      </form>

    </div>
  </div>
</div>

JavaScript

$('#delete-file-modal').on('hide.bs.modal show.bs.modal', function(event) {
  var $activeElement = $(document.activeElement);
  
  if ($activeElement.is('[data-toggle], [data-dismiss]')) {
    if (event.type === 'hide') {
      // Do something with the button that closed the modal
      alert('The button that closed the modal is: #' + $activeElement[0].id);
    }
    
    if (event.type === 'show') {
      // Do something with the button that opened the modal
      alert('The button that opened the modal is: #' + $activeElement[0].id);
    }
  }
});