JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<form id="phone">
    <div style="text-align: center;">
        <div class="input-group">
            <div class="input-group-btn">'+ '
                <button id="label" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span id="areaCodes">+1</span><span class="caret"></span>
                </button>
                <ul class="dropdown-menu" id="areaCodes" role="menu">
                    <li><a href="#" id="1">+1</a>

                    </li>
                    <li><a href="#" id="44">+44</a>

                    </li>
                </ul>
            </div>
            <input class="form-control phone" name="phone" aria-label="..." placeholder="Your phone number" type="text"> <span class="input-group-btn">
                                    <input class="btn btn-default submit" type="submit">SUBMIT</input>
                                    </span>
        </div>
    </div>
</form>

CSS

.error {
    font-family: Knowledge!important;
    size: 14px!important;
    color: red;
    font-weight: 600!important;
}
.dropdown-toggle, .submit {
    width: 68px!important;
    height: 34px!important;
}

JavaScript

$(document).ready(function () {

    // Load dialog on page load
    //$('#basic-modal-content').modal();

    // Load dialog on click
    $('#basic-modal .basic').click(function (e) {
        $('#basic-modal-content').modal();
        return false;
    });

    $("#1, #44").click(function (e) {
        $("#label").html("+" + $(this).attr("id") + " <span class='caret'></span>");
        var phone = $('input[name="phone"]');
        if ($(this).attr("id") == '1') {
            phone.rules('remove', 'phoneUK');
            phone.rules('add', {
                phoneUS: true
            });
        } else {
            phone.rules('remove', 'phoneUS');
            phone.rules('add', {
                phoneUK: true
            });
        }
    });

    $("#areaCodes li").click(function () {
        $("#label").text($($(this).find("a")).text())
        //removes isSelected class
        $("#areaCodes li a").removeClass("isSelected");
        //add isSlected Class to clicked element
        $($(this).find('a')).addClass("isSelected")
    });

    $('.phone').on('input', function (event) {
        this.value = this.value.replace([9,8,7]{1}/g, '');
    });

    $("#phone").validate({
        errorPlacement: function (error, element) {
            error.insertAfter($(element).parent('div'));
        },
        rules: {
            phone: {
                required: true,
                phoneUS: true
            }
        },
        messages: {
            phone: {
                phoneUS: "Please enter a valid US number",
                phoneUK: "Please enter a valid UK number"
            }
        },
        submitHandler: function (form) {
            $.ajax({
                url: '/textMessage/' + $("#areaCodes .isSelected").text() + $('input[name="phone"]').val(),
                method: "GET",
                success: function () {
                    console.log(form);
                }
            });
            return false;
        }
    });
});