JSFiddle - React, Tailwind, and code Playground

HTML

<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>
<script src="//jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="//jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<div class="container">
    <div id='basic-modal'> <a href='#' class='basic'>Demo</a>

    </div>
    <div id='container'>
        <div id="basic-modal-content">
            <div class="col-md-2">
                <div class="logo"></div>
            </div>
            <form id="phone">
                <div class="col-md-10">
                    <div class="modal-header" style="text-align: center;">
                         <h5>Get a link on your phone</h5> 
                        <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="areaCode">+1</span><span class="caret"></span>

                                </button>
                                 <ul id="somelist" class="dropdown-menu" role="menu" aria-labelledby="label">
                                    <li role="presentation"><a class="isSelected" role="menuitem" tabindex="-1" href="#">Action</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
                                  </ul>
                            </div>
                            <input class="form-control phone" name="phone" aria-label="..." placeholder="Your phone number"...

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
            });
        }
    });
    //new code
    $("#somelist li").click(function(){
        //sets button text
        $("#label").text($($(this).find("a")).text())
        //removes isSelected class
        $("#somelist li a").removeClass("isSelected");
        //add isSlected Class to clicked element
        $($(this).find('a')).addClass("isSelected")
        alert("working")
    })
    
    $("#test").click(function(){
        alert($("#somelist .isSelected").text())
    })

    $('.phone').on('input', function (event) {
        this.value = this.value.replace(/[^0-9]/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").find(":selected").val() + $('input[name="phone"]').val(),
                method: "GET",
               ...