JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <div class="skill">
        <select id="3" name="3">
            <option value=""></option>
            <option value="1" selected="selected">Beginner</option>
            <option value="2">
                Intermediate
            </option>
            <option value="3">Expert</option>
        </select>
        <label for="3" title="">JMS</label>
    </div>
</form>

CSS

.button {
    border-color: silver;
    color: silver;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-family: sans-serif;
    font-size: 10pt;
    font-weight: bold;
    margin: 2px;
    overflow: visible;
    padding: 0.2em 0.5em;
    text-decoration: none !important;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.button:hover, .button:focus {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.button:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) inset;
}
.button[disabled] {
    background-color: #2672ae;
    background-image: -moz-linear-gradient(center top, #2672ae 0%, #1e4f7e 100%);
    box-shadow: none;
    cursor: default;
    opacity: 0.6;
}
.button[title=Beginner] {
    color: #606060;
    text-shadow: 0px -1px 0px rgba(170, 170, 170, 0.6);
    background-color: #d0d0d0;
    background-image: linear-gradient(#e0e0e0, #c0c0c0);
    background-repeat: repeat-x;
    border-color: #c0c0c0;
}
.button[title=Intermediate] {
    color: #604040;
    text-shadow: 0px -1px 0px rgba(120, 150, 150, 0.5);
    background-color: #e0c040;
    background-image: linear-gradient(#f0d040, #d0b000);
    background-repeat: repeat-x;
    border-color: #d0b000;
}
.button[title=Expert] {
    color: #202020;
    text-shadow: 0px -1px 0px rgba(120, 120, 120, 0.4);
    background-color: #60c040;
    background-image: linear-gradient(#70e060, #50a020);
    background-repeat: repeat-x;
    border-color: #50a020;
}

JavaScript

$(document).ready(function () {

    function txt(element) {
        return $.trim(element.text());
    }

    $(".skill > select").each(function () {
        var select = $(this);
        var label = $("label[for='" + select.attr('id') + "']");

        function selectedOption() {
            return select.children('option:selected');
        }
        select.hide();

        label.addClass("button");
        label.prop('title', txt(selectedOption()));

        label.click(function () {
            var next = selectedOption().next();
            if (next.length === 0) {
                next = select.children('option:first');
            }
            next.prop('selected', 'true');
            label.prop('title', txt(next));
        });
    });

});