JSFiddle - React, Tailwind, and code Playground

HTML

<div class="progr bachelor">

                            <div data-val="1" class="circle pointer done">
                                <span class="label">1</span>
                                <span class="title"></span>
                            </div>

                            <span class="bar"></span>

                            <div data-val="2" class="circle pointer">
                                <span class="label">2</span>
                                <span class="title"></span>
                            </div>

                            <span class="bar"></span>

                            <div data-val="3" class="circle pointer">
                                <span class="label">3</span>
                                <span class="title"></span>
                            </div>

                            <span class="bar"></span>

                            <div data-val="4" class="circle pointer">
                                <span class="label">4</span>
                                <span class="title"></span>
                            </div>

                            <span class="bar"></span>

                            <div data-val="5" class="circle pointer">
                                <span class="label">5</span>
                                <span class="title"></span>
                            </div>

                            <span class="bar"></span>

                            <div  data-val="6" class="circle pointer">
                                <span class="label">6</span>
                                <span class="title"></span>
                            </div>

                        </div>

CSS

/* Form Progress */
.progr {
    width: 100%;
    margin: 0;
    text-align: left;
    overflow: visible;
    border:0;
    background: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
    position: relative;
    margin-top: 10px;
}
.progr .circle,
.progr .bar {
    display: inline-block;
    text-align: center;
    background: #fff;
    width: 55px; height: 55px;
    border-radius: 40px;
    border: 1px solid #00a1c8;
}
.progr .bar {
    position: relative;
    width: 3%;
    height: 6px;
    margin: 0 -5px 2px -4px;
    border-left: none;
    border-right: none;
    border-radius: 0;
}
.progr .circle .label {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 49px;
    border-radius: 32px;
    margin-top: 3px;
    color: #00a1c8;
    font-size: 17px;
}
.progr .circle .title {
    color: #b5b5ba;
    font-size: 13px;
    min-width: 100%;
    line-height: 30px;
    margin-left: -5px;
}

/* Done / Active */
.progr .bar.done,
.progr .circle.done {
    background: #00a1c8;
}


.progr .circle.done{
    margin-right: 0px;
}

.progr .circle.done .label {
    color: #FFF;
    background: #00a1c8;
}
.progr .circle.done .title {
    color: #444;
}
.progr .circle.active .label {
    color: #FFF;
    background: #0c95be;
    box-shadow: inset 0 0 2px rgba(0,0,0,.2);
}
.progr .circle.active .title {
    color: #0c95be;
}
.pointer{
    cursor: pointer;
}

JavaScript

$(document).on("click", ".progr .circle", function() {

        reset = $(this).parent().data("reset");
        full = $(this).parent().data("full");

        $(reset).children().each(function() {
            $(this).removeClass("done");
        });

        $(this).children().each(function() {
            $(this).removeClass("done");
        });
        
        $(full).children().each(function() {
            $(this).addClass("done");
        });

        val = $(this).data("val");
        $(this).parent().children().each(function() {
            $(this).removeClass("done");
        });

        $(this).parent().children().each(function() {
            $('#job_semester').val($(this).data("val"));
            val_new = $(this).data("val");
            $(this).addClass("done");
            if (val_new == val) {
                return false;
            }
        });
    });