JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dialog"></div>
<button id="open">Open</button>

JavaScript

var $button1;
var dialog = $('#dialog').dialog({
    autoOpen: false,
    create: function (event, ui) {
        var $button1 = $('#button1');
        console.log("$button1 create", $button1, $button1.outerHeight(), $button1.position().top);
    },
    open: function (event, ui) {
        if (!$button1) {
            $button1 = $('#button1');
            console.log("$button1 open", $button1, $button1.outerHeight(), $button1.position().top);
        }
    },
    buttons: [{
        id: 'button1',
        text: 'Upload',
        click: function () {
            console.log('button1');
        }
    }, {
        id: 'button2',
        text: 'Save',
        click: function () {
            console.log('button2');
        }
    }, {
        text: 'Cancel',
        click: function () {
            $(this).dialog("close");
        }
    }]
});
$('#open').click(function () {
    dialog.dialog('open');
});