JSFiddle - React, Tailwind, and code Playground

HTML

<input id="btn" type="button" value="Click Me" />

JavaScript

$(document).on("click", "#btn", function() {

  $('<div id="dlg"></div>').dialog({
    modal: true,
    title: "Confirmation",
    open: function() {
      $(this).find("[type=submit]").hide();

      var markup = 'Hello World<br>';

      markup += '<form id="myForm">';
      markup += '<label for="search">Level:</label>';
      markup += '<input type="text" id="search" name="q">';
      markup += '</form>';
      $(this).html(markup);

      $("#myForm").submit(function(e) {
        e.preventDefault();
	
  			changeLevelClicked(search.value);
        //alert('event');
      });
      
      //$('#myForm').submit(changeLevelClicked);
    },
    buttons: [{
      text: "Ok",
      click: $.noop,
      type: "submit",
      form: "myForm", // <-- Make the association
      //Ok: function () {
      click: function() {
        $(this).dialog("close");
        //$("#dlg").remove();
      }
    }]
  }); //end confirm dialog

});

function changeLevelClicked(level) {
  console.log("changeLevelClicked", level);
}