JSFiddle - React, Tailwind, and code Playground

HTML

<p>Please hover over the red div.<br>The first jQ UI dialog should have two buttons. The first button is missing.</p>

<div id="myDiv"></div>
<div id="message"></div>

CSS

#myDiv {
    width:300px;
    height:100px;
    background-color:red
}
p {width:50%;border:1px solid grey;}

JavaScript

var cnt = 0;
		var ans = 0;
		var seen = 0;
		var dlg = $('#message');

		dlg.dialog({
		    autoOpen: false,
		    modal: true,
		    width: 500,
		    close: function () {
		        if (seen == 0 && ans > 0) {
		            cnt++;
		            seen++;
		            dlg.html('Here is a second message');
		            dlg.dialog(
		                'option',
		                'buttons', [{
		                text: 'OK',
		                click: function () {
		                    $(this).dialog('close');
		                }
		            }]);
		            dlg.dialog('open');
		        }
		    }
		});

		$('#myDiv').hover(

		function () {
		    //Hover-in
		    if (cnt < 1 || (cnt > 2 && cnt < 4) || (cnt > 5 && cnt < 7)) {
		        var msg = 'First display text goes here';
		        dlg.html(msg);
		        dlg.dialog(
		            'option',
		            'buttons', {
                        "Download": function () {
    		                ans++;
	    	                $(this).dialog('close');
		                },
                        "Not now": function () {
    		                alert('If the first button had displayed, and you clicked it, a second message would display -- inside this dialog -- with different buttons.');
		                    $(this).dialog('close');
		                }
		        });
		        dlg.dialog('open');
		    }
		    cnt++;
		},

		function () {
		    //Hover-out
		    //need this to prevent duplicating hover-in code (double-display dlg)
		});