JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dialogbox"></div>

<div id="content">
    <p>name: <input type="text" id="name"/></p>
    <p>address: <input type="text" id="address"/></p>
    <p>Date: <input type="text" id="datepicker"/></p>
    <input type="text" id="test" />
 </div>
  <input type="submit" id="mybutt" value="next">

JavaScript

$("#dialogbox").dialog({
    autoOpen:false,
    modal:true,
    title: "Use of Open event",
    width:400,
    open: function( event, ui ) {
    }
});

$('#mybutt').click(function() {
    $('#dialogbox').empty()
    var $clone=$("#content").clone()
    $('#dialogbox').append($clone)
    $("#dialogbox :input").prop("disabled", true);
    $('#dialogbox').dialog('open');
});