JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">

    <div id="dialog1">
      This is dialog 1
    </div>
    <div id="dialog2">
      This is dialog 2
    </div>

JavaScript

$("#dialog1").dialog({
    bgiframe: true,
    modal: false,
    autoOpen: false,
    position: ["right", "bottom"],
    height: 200,
    minHeight: 80,
    width: 400,
    buttons: {
        "Cancel": function() {},
        "OK": function() {
            $("#dialog1").dialog("close");
            console.log("OK1");
        }
    },
});

$("#dialog1").dialog("open");

$("#dialog2").dialog({
    bgiframe: true,
    modal: false,
    autoOpen: false,
    position: ["left", "top"],
    height: 200,
    minHeight: 80,
    width: 400,
    buttons: {
        "Cancel": function() {},
        "OK": function() {
            $("#dialog2").dialog("close");
            console.log("OK2");
        }
    },
});

$("#dialog2").dialog("open");