JSFiddle - React, Tailwind, and code Playground

HTML

<form>
 <input name="delete" type="button" id="delete" value="Delete"/>
    <input type="button" id="cancel" value="Cancel">
<div id='info'></div>
</form>

CSS

#info {
	width: 450px;
	border: 1px solid #00F;
	background: #BDE5F8;
	color: #000;
	padding: 4px;
	text-align: center;
	margin-top: 5px;
}

JavaScript

$('#info').hide();
					$('#info').html('');
					
					$('#delete').on('click', function()
					{
						$('#info').slideDown();
						$('#info').html('Really delete <?php echo $aid; ?>?');
						$('<br/><br/><input type="button" value="Sure" id="sure">').appendTo('#info');
						
					});
					
					$(document).on('click', '#sure', function(e)
					{
						e.stopPropagation();
						alert('Goodbye <?php echo $aid; ?>?');
						
					});

$('#cancel').on('click', function()
					{
						$('#info').slideUp();
						$('#info').html('');
						
					});