JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css">
<form id="edit_user_form" action="javascript:alert('success!');" method="POST">

  <input type="button" value="Delete User" id="delete_btn" onclick="confirmDeleteUser();" />
</form>

<div id="dialog-modal" title="Confirm Delete User">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span> Are you sure you wish to delete this user?</p>
</div>

JavaScript

confirmDeleteUser = function() {

  $('#dialog-modal').dialog({
    autoOpen: false,
    modal: true,
    resizable: false,

    buttons: {
      "Cancel": function() {
        $(this).dialog("close");
        return false;
      },
      "Delete User": function() {
        var form = $('#edit_user_form');
        form.submit();
        console.log('real');
        $(this).dialog("close");
        return true;
      }
    }
  });
  
  $('#dialog-modal').dialog('open');

}