JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="diag" title="Action">
  This is my dialog.
</div>

JavaScript

function resendPass() {
  // I resend the password.
}

var batch = {
  SUPDELIVERYMETHOD: "Email"
};

var details = {
  STATUS: "VALID"
}

var btns = {
  "Exi1": function(e) {
    $(this).dialog('close');
  }
};
if (batch.SUPDELIVERYMETHOD === 'Email' && details.STATUS === 'VALID') {
  btns["Re-send SUP"] = resendPass;
}
if (details.STATUS === 'VALID') {
  btns["Cancel SUP"] = function(e) {
    $('#dialog-confirm-cancelsup').dialog('open');
  };
}

$(function() {
  $("#diag").dialog({
    buttons: btns,
    width: "400px"
  });
  $(".ui-dialog-buttonset button:contains('Cancel SUP')").button("disable");
});