JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css">
<input type="submit" value="Save"        name="submit"     id="submit"/><br />
<input type="submit" value="Cancel"      name="cancel"     id="cancel"/><br />            
<input type="button" value="Delete User" name="delete_btn" id="delete_btn"/>


<div id="dialog-modal" title="Confirm Delete User">
    <p>
        <span class="ui-icon ui-icon-alert dialogAdjust"></span>
        Are you sure you wish to delete this user?
    </p>
<p>To continue editing, click cancel.</p>
</div>

CSS

.dialogAdjust {
        float: left;
        margin: 0 7px 0 0;
    }

JavaScript

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

    buttons: {
        "Cancel": function() {
            $(this).dialog("close");
            return false;
        },
        "Delete User": function() {
            var self = $(this);
            var form = $('#edit_user_form');
            //We've added the var infront of tepElem
            var tmpElm = $('<input type="hidden" />');
            tmpElm.attr('name', 'delete');
            tmpElm.attr('id', 'delete');
            tmpElm.val(true);
            tmpElm.appendTo(form);
            form.submit();
            return true;
        }
    }
});

$("#delete_btn").click(function(e){
    $('#dialog-modal').dialog('open');
});