JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" data-toggle="modal" 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').modal('show');

$('#delete-file-modal .modal-footer button').on('click', function(event) {
  var $button = $(event.target);

  $(this).closest('.modal').one('hidden.bs.modal', function() {
    alert('The buttons id that closed the modal is: #' + $button[0].id);
  });
});