JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css">
<span class="statusIcon">Show form.</span>
<div id="dialog" title="Update membership no and renew member" style="display:none;">
    <form id="FormRenew" action="">
        <label for="NewNo">New Membership No</label>
        <input type="text" id="NewNo" name="NewNo" value="0" size="5" class="required number" data-msg=" The membership number must be a unique number" />
    </form>
</div>

CSS

.statusIcon {
    cursor: pointer;
}

JavaScript

$(document).ready(function() {
    $(document).on('click', '.statusIcon', function() {
        //alert('Clicked');
        $('#dialog').dialog('open');
    });

    var renewValidator = $("#FormRenew").validate({
        onfocusout: false,
        rules: {
            NewNo: {
                minlength: 2,
                remote: {
                    url: "action.php?checkDup=1"
                }
            }
        }
    });

    $("#dialog").dialog({
        bgiframe: true,
        autoOpen: false,
        width: 450,
        modal: true,
        buttons: {
            Renew: function() {
                if ($("form").valid()) {
                    alert('Valid form');
                }
            },
            Cancel: {
                text: 'Cancel',
                //immediate: "true",
                //formnovalidate: 'formnovalidate',
                //priority: 'immediate',
                //class: 'cancel',
                click: function(e) {
                    console.log('Cancel clicked!');
                    //e.preventDefault();
                    //$("form").validate().cancelSubmit = true;
                    $(this).dialog('close');
                }
            }
        },
        beforeClose: function() {
            renewValidator.resetForm();
            $("#FormRenew").trigger("reset");
        }
    });
});