JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<button id="prod_btn">test</button>
<ul>
    <li>test</li>
    
</ul>

JavaScript

function confirm () {
            var defer = $.Deferred(); 
            $('<div>Do you want to continue?</div>').dialog({
                    autoOpen: true,
                    close: function () { 
                        $(this).dialog('destroy');
                    },
                    position: ['left', 'top'],
                    title: 'Continue?',
                    buttons: {
                        "Yes": function() {
                            defer.resolve("yes"); //on Yes click, end deferred state successfully (done)
                            $( this ).dialog( "close" );
                        },
                        "No": function() {
                            defer.resolve("no"); 
                            $( this ).dialog( "close" );
                        }
                    }
                });
            return defer.promise(); //important to return the defer promise
        }
        
        $(document).ready(function () {
            $('#prod_btn').click(function () {
                confirm().then(function (answer) {//done will run if Yes is clicked
                    alert('run all my code on '  + answer);
                    
                });
            });
        
        });