JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/ui-lightness/jquery-ui.css">
<html>
<head></head>
<body>
     
    <form action="http://www.google.com/index.html" method="post">
        
        <input type="button" value="Open jQuery dialog" id="btnOpenDialog" />
        <br /><br /><br />
        
        The button below submits the form correctly if you click it.<br />
        However, when I try to trigger click() event on this button <u>from within the jQuery UI Dialog above</u> then the form <b>fails to be submitted.
        </b><br />
        
        <input type="submit" value="Submit Form" id="btnSubmitForm" />  
        <input type="hidden" id="hdnEmployeeChosen" value="" />            
    </form>    
    

    <div id="divPopup" class="dialogClass" style="display: none;">
        Picking an employee below <b>ought to</b> cause the form to submit, but sadly it does not...
        <br /><br />
        
        <div class="divOptions">
            <input type="button" value="Pick" class="pickButton" employeeName="Weird Al" />
            Weird Al Yankovic
        </div>
        <div class="divOptions">            
            <input type="button" value="Pick" class="pickButton" employeeName="Dracula" />
            Count Dracula
        </div>
        <div class="divOptions">          
            <input type="button" value="Pick" class="pickButton" employeeName="David" />
            David Copperfield
        </div>        
    </div>
    
</body>

CSS

form {
margin: 5px;
    border: 1px solid black;
    background-color: #EEE;
    padding: 15px 5px;
}

.dialogClass {
 border: 1px solid black;
padding: 5px;
margin: 5px;
    background-color: LightBlue;
    font-size: 14px;
}

.pickButton {
  margin-right: 5px;   
}

.divOptions {
   margin-bottom: 3px;   
}

JavaScript

$(document).ready(function ()
{
    var jqueryDialog = $('#divPopup')
                .dialog({
                    autoOpen: false,
                    modal: true,
                    title: 'My Dialog',
                    width: 300,
                    height: 300,
                    draggable: false,
                    resizable: false
                });
    
    // This "fix" does not appear to help matters..........
    jqueryDialog.parent().appendTo($("form:first"));
    
    $('#btnOpenDialog').click(function () {
        jqueryDialog.dialog('open');    
    });    

    $('.pickButton').click(function () {
        
        // Put picked value into hidden field
        var pickedEmployee = $(this).attr('employeeName');
        $('#hdnEmployeeChosen').val(pickedEmployee);
        
        // Try to cause a submit (ASP.NET postback in my case)        
        // THIS PART DOES NOT WORK.................
        $('#btnSubmitForm').click();
        
        //alert($('#hdnEmployeeChosen').val());
    });    
    
});