JSFiddle - React, Tailwind, and code Playground

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<body id="body1">
    <input type="button" data-popup="pop101" value="Popup1" />
    <input type="button" data-popup="pop102" value="Popup2" />
    <input type="button" data-popup="pop103" value="Popup3" />

    <div id="container"></div>
    
    <div style="background: green" id='pop101' class="popup"></div>
    <div style="background: orange" id='pop102' class="popup"></div>
    <div style="background: blue" id='pop103' class="popup"></div>
</body>
</html>

JavaScript

$(document).ready(function ()
{
    $(".popup").dialog({
        autoOpen: false,
        draggable: true,
        title: "Add New Person",
        open: function (type, data) {
            $(this).parent().appendTo("#container");
        }
    });
    $('[data-popup^="pop"]').click(function(e){
        close(); //close all opened dialogs
        e.stopPropagation(); // stop body1 click
        $('#' + $(this).data('popup')).dialog("open");
    });
    
    var close = function()
    {
        $('.ui-dialog:visible').find('.popup').dialog('close');
    };
    
    $('#body1').click(close);
});