jQueryUI Dialog

HTML

<div id="myDialog">
    Enter your first name
    <input type="text" id="myTextBox" />
</div>
<div id="myDialog2">
    Enter your last name
    <input type="text" id="myTextBox2" />
</div>

<button id="clickMe">Click Me</button>

JavaScript

let input1 = '';
let input2 = '';

//Set up the dialog box 1
$("#myDialog").dialog({
    autoOpen  : false,
    modal     : true,
    title     : "Box 1",
    buttons   : {
              'Next' : function() {
                  input1 = $('#myTextBox').val();
                  $("#myDialog2").dialog("open");
              },
              'Close' : function() {
                  $(this).dialog('close');
              }
           }
});

//Set up the dialog box 2
$("#myDialog2").dialog({
  autoOpen  : false,
  modal     : true,
  title     : "Box 2",
  buttons   : {
    'OK' : function() {
      input2 = $('#myTextBox2').val();
      alert('Hello ' + input1 + ' ' + input2);
    },
    'Close' : function() {
      $(this).dialog('close');
    }
  }
});


$('#clickMe').click(function() {
    $("#myDialog").dialog("open");
});