JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div>
        <form>
            <table>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </table>
            <div id="dialog-form" title="Add New Reference Status">
                <p class="validateTips">Enter Reference Status not found in the list box.</p>
                <form>
                    <fieldset>
                        <label for="refStatus">Reference Status</label>
                        <input type="text" name="refStatus" id="refStatus" class="text ui-widget-content ui-corner-all" />
                    </fieldset>
                </form>
            </div>
            <div id="referenceStatus-contain" class="ui-widget">
                 <h1>Existing Reference Statuses:</h1>

                <table id="data-table">
                    <tbody>
                        <tr>
                            <td>
                                <select id="ReferenceStausBean_1_TransStatus" class="ui-widget ui-widget-content">
                                    <option value="X">PQR</option>
                                </select>
                            </td>
                            <td>
                                <select id="ReferenceStausBean_1_ReferenceStatus" class="ui-widget ui-widget-content">
                                    <option value="X">X</option>
                                </select>&nbsp;&nbsp;
                                <button class="add-RefStatus">Add Non-Existing Reference Status</button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <select id="ReferenceStausBean_2_TransStatus" class="ui-widget ui-widget-content">
                                    <option value="X">PQR</option>
                               ...

CSS

body {
     font-size: 62.5%;
 }
 label, input {
     display:block;
 }
 input.text {
     margin-bottom:12px;
     width:95%;
     padding: .4em;
 }
 fieldset {
     padding:0;
     border:0;
     margin-top:25px;
 }
 h1 {
     font-size: 1.2em;
     margin: .6em 0;
 }
 div#referenceStatus-contain {
     width: 350px;
     margin: 20px 0;
 }
 .ui-dialog .ui-state-error {
     padding: .3em;
 }
 .validateTips {
     border: 1px solid transparent;
     padding: 0.3em;
 }
 </style>

JavaScript

var nearbySelectID = '';
$(function () {
    var refStatus = $("#refStatus"),
        allFields = $([]).add(refStatus),
        tips = $(".validateTips");

    function updateTips(t) {
        tips.text(t)
            .addClass("ui-state-highlight");
        setTimeout(function () {
            tips.removeClass("ui-state-highlight", 1500);
        }, 500);
    }

    function checkLength(o, n, min, max) {
        if (o.val().length > max || o.val().length < min) {
            o.addClass("ui-state-error");
            updateTips("Length of " + n + " must be between " + min + " and " + max + ".");
            return false;
        } else {
            return true;
        }
    }

    function isExist() {
        var exists = false;
        $("#ReferenceStausBean_1_ReferenceStatus > option").each(function () {
            if (this.value.toLowerCase() == refStatus.val().toLowerCase()) {
                exists = true;
            }
        });
        //var exists = 0 != $('#ReferenceStausBean_1_ReferenceStatus option[value='+refStatus.val()+']').length;
        if (exists) {
            refStatus.addClass("ui-state-error");
            updateTips("Value " + refStatus.val() + " already exists in Reference Status List Box.");
            return false;
        } else {
            return true;
        }
    }

    function checkRegexp(o, regexp, n) {
        if (!(regexp.test(o.val()))) {
            o.addClass("ui-state-error");
            updateTips(n);
            return false;
        } else {
            return true;
        }
    }
    $("#dialog-form").dialog({
        autoOpen: false,
        height: 220,
        width: 310,
        modal: true,
        buttons: {
            "Add Reference Status to List": function () {
                var bValid = true;
                allFields.removeClass("ui-state-error");
                bValid = bValid && checkLength(refStatus, "refStatus", 1, 100);
                bValid = bValid && isExist();
                if...