JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <fieldset>
        <legend>Java features and APIs</legend>
        <fieldset>
            <legend>Java language</legend>
            <div class="skill">
                <label for="generics">Generics</label>
                <select id="generics" name="generics">
                    <option value=""></option>
                    <option value="1">Beginner</option>
                    <option value="2">Intermediate</option>
                    <option value="3">Expert</option>
                </select>
            </div>
        </fieldset>
        <fieldset>
            <legend>JSE</legend>
            <div class="skill">
                <label for="collections" title="">Collections</label>
                <select id="collections" name="collections">
                    <option value=""></option>
                    <option value="1">Beginner</option>
                    <option value="2">Intermediate</option>
                    <option value="3">Expert</option>
                </select>
            </div>
            <div class="skill">
                <label for="nio2" title="">NIO2</label>
                <select id="nio2" name="nio2">
                    <option value=""></option>
                    <option value="1">Beginner</option>
                    <option value="2">Intermediate</option>
                    <option value="3">Expert</option>
                </select>
            </div>
        </fieldset>
        <fieldset>
            <legend>JEE</legend>
            <div class="skill">
                <label for="jms" title="">JMS</label>
                <select id="jms" name="jms">
                    <option value=""></option>
                    <option value="1">Beginner</option>
                    <option value="2">Intermediate</option>
                    <option value="3">Expert</option>
                </select>
            </div>
            <div class="skill">
                <label for="jpa" title="">JPA</label>
               ...

CSS

body {
    font-family: sans-serif;
    font-size: 10pt;
    font-weight: bold;
}
.skill {
    float: left;
}
form > fieldset {
    margin-bottom: 0.5em;
}
input[type=submit] {
    margin-top: 0.5em;
}
.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], .button[type=submit] {
    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));
        });
    });

});