JSFiddle - React, Tailwind, and code Playground

HTML

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


<ul>
<li><a href="#" class="dialog">1</a></li>
<li><a href="#" class="dialog">2</a></li>
<li><a href="#" class="dialog">3</a></li>
<li><a href="#" class="dialog">4</a></li>
</ul>

CSS

ul {
    margin:0;
    padding:0;
    list-style:none;
}

#dialog {
 display:none;   
}

JavaScript

$(document).ready(function() {
    var $dialog = $('<div></div>')
        .html('This dialog will show every time!')
        .dialog({
            autoOpen: false,
            title: 'Basic Dialog'
        });

    $(".dialog").click(function(evt) {
        $dialog.dialog("open").text("link " + $(evt.target).text());
        evt.preventDefault();
    });
});