JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/themes/black-tie/jquery-ui.css">
<a href="#" id="link">Dialog 1</a>

<div id="dialog1">
    Content content content
    <a href="#" id="link2">Dialog 2</a>
</div>
<div id="dialog2">Content content content</div>

JavaScript

Array.prototype.remove = function(from, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};

var openDialogs = [];
var settings = {
    autoOpen: false,
    open: function() {
        openDialogs[openDialogs.length] = $(this).attr("id");
    },
    close: function() {
        var index = $.inArray($(this).attr("id"), openDialogs),
            $previousDialog = (index - 1 >= 0) ? $("#" + openDialogs[index - 1]) : undefined;

        // remove the current dialog from the array via Jon Resig's remove() method
        openDialogs.remove(index);

        // set focus to previously opened dialog
        if ($previousDialog) {
            $previousDialog.focus();
        }
    }
};


$("#dialog1").dialog(settings);
$("#dialog2").dialog(settings);

$("#link").click(function() {
    $("#dialog1").dialog("open");
});

$("#link2").click(function() {
    $("#dialog2").dialog("open");
});