JSFiddle - React, Tailwind, and code Playground

by Nir Azuelos

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/start/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<div id="dialog">
    Hello, my name is: 
    <div class="">
        <!-- Content goes here -->
    </div>
</div>

<ul id="names">
    <li data-name="hasen"><a href="#">Hasen</a></li>
    <li data-name="todd"><a href="#">Todd</a></li>
    <li data-name="patricia"><a href="#">Patricia</a></li>
</ul>

JavaScript

$("ul#names > li").click(function() {
    var myName = $(this).data("name");
    
    /* Open Dialog */
    if($("#dialog").dialog("isOpen") !== true)
        $("#dialog").dialog("open")
})

$("#dialog").dialog({
    autoOpen: false
})