JSFiddle - React, Tailwind, and code Playground

HTML

<input type="submit" onclick="addeditUser();" value="click me to show box"></input>
<div id="popup" style="display:none;">
<form id="adduser">
    <select id="ptsiid" name="ptsiid" onchange="secondarySiteDisplay();">
        <option value=""></option>
        <option value="1666">London</option>
        <option value="1544">NYC</option>
    </select>First Name:
    <input type="text" name="firstname" value="" size="15" maxlength="60">Last Name:
    <input type="text" name="lastname" value="" size="15" maxlength="60">Job Title:
    <input type="text" name="jobtitle" value="" size="20" maxlength="40">E-mail:
    <input type="text" name="email" value="" size="40" maxlength="128">Can Login?
    <td class="data" align="left">
        <input type="checkbox" name="canlogin">
    </td>Is Deleted?
    <td class="data" align="left">
        <input type="checkbox" name="isdeleted">
    </td>Change Password?
    <td class="data" align="left">
        <input type="checkbox" name="changepassword">
    </td>
    <input class="button" type="button" value="Update" onclick="doAjaxSubmit();" accesskey="">
</form>
</div>

JavaScript

function addeditUser() {
  showDialog(); 
  alert(jQuery('#popup').text());
}

function showDialog() {
  jQuery('#popup').dialog( { 
    modal: true,
    title: 'Edit User',
    resizable: false,
    width: 'auto',
    autoOpen: false,
    open: function() {
      jQuery( "button, input[type=submit]" ).button();
      secondarySiteDisplay();
      if ( jQuery('#ptsiid').length != 0 ) {
        jQuery('#ptsiid').focus();
        jQuery('#popup').dialog().width(jQuery('#popup').width());
        
      } else {
        document.forms.editform.firstname.focus();
      }
    }
  });
  
  jQuery('#popup').dialog('open').height('auto');

  return false;
}