JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>

<!-- LOAD JQUERY LIBRARY: -->  
    <link href="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery-ui.css" type="text/css" rel="stylesheet" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"> </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"> </script>

</head>

<body>
<div style="display:none" id="dd">
<div id="d1">
</div>

</div>
<p><input type="button" value="Submit" name="B1" id="B1"></p>

</body>

</html>

JavaScript

var z;

$(document).ready(function() {
  $('#dd').dialog({ 
                                    autoOpen:   true,
                                    modal:      true,
                                    overlay:    { opacity: 0.5, background: 'black'},
                                    title:      'Select the date:',
                                    height:     215, 
                                    width:      234,
                                    draggable:  false, 
                                    resizable:  false

   });//end of dialog_atip

  
  $("#B1").click(function(){ 
        callback();
  });
    
  $('#d1').datepicker({
     onSelect:function(){
                    z = $(this).val();
                    alert(z);
                    $("#dd").dialog("close");
     }

  });

});//end of window.onload


function callback() { 
    alert(z);
}