JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<script src="https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/1.4.0/dist/jquery.maskedinput.min.js"></script>
<form name="form_new_customer"  id="form-new-customer" novalidate autocomplete="off">
        <legend class="visuallyhidden">Please login</legend>
        <div id="erroContainer"></div>
        <div class="field control-group">
            <!--<label for="applicationId">Social Security Number</label> -->
            <input type="password" class="form-text" name="ssn" id="ssn" required="true" minlength="9" maxlength="9" aria-describedby="ssn-errors" placeholder="Social Security Number" >
        </div>
        <div class="field control-group">
            <!-- <label for="applicationId">Application ID</label> -->
            <input type="text" class="form-text" name="applicationId" id="applicationId" required="true" minlength="8" maxlength="9" aria-describedby="applicationId-errors" placeholder="Application ID"/>
        </div>
        <div class="field control-group">
            <!--<label for="dob">Date of Birth</label> -->
            <input type="tel" class="form-text" name="dob" id="dob" required="true" minlength="4" maxlength="10" aria-describedby="dob-errors" placeholder="Date of Birth" />
        </div>
        <div>
            <input type="submit" class="c1-button progress-button btn-100" value="Sign In"/>
        </div>
        <br />
    </form>

JavaScript

$("#dob", "body")
                .mask("99/99/9999", {
                    placeholder: "",
                    autoclear: false
                })
                .bind("blur", function () {
                    // force revalidate on blur to help with jquery.validate.js
                    var frm = $(this).parents("form");
                    // if form has a validator
                    if ($.data(frm[0], 'validator')) {
                        var validator = $(this).parents("form").validate();
                        validator.settings.onfocusout.apply(validator, [this]);
                    }
                });
         $("#ssn", "body")
                .mask("999-99-9999", {
                    placeholder: "",
                    autoclear: false
                })
                .bind("blur", function () {
                    // force revalidate on blur to help with jquery.validate
                    var frm = $(this).parents("form");
                    // if form has a validator
                    if ($.data(frm[0], 'validator')) {
                        var validator = $(this).parents("form").validate();
                        validator.settings.onfocusout.apply(validator, [this]);
                    }
                });
         $.mask.definitions['h'] = "[A-Fa-f0-9]";
         $("#applicationId", "body")
                .mask("Ehhhhhhh?h", {
                    placeholder: "",
                    autoclear: false
                })
                .bind("blur", function () {
                    // force revalidate on blur to help with jquery.validate
                    var frm = $(this).parents("form");
                    // if form has a validator
                    if ($.data(frm[0], 'validator')) {
                        var validator = $(this).parents("form").validate();
                        validator.settings.onfocusout.apply(validator, [this]);
                    }
                });
        ...