JSFiddle - React, Tailwind, and code Playground

by Rusln

HTML

<div id="container">
    <ul class="sel">
        <li>selected option is: <span></span>

        </li>
        <li> <a>
          1
        </a>

        </li>
        <li class="selected_option"> <a>
          2
        </a>

        </li>
    </ul>
</div>

CSS

ul {
    list-style:none;
    font-size:19px;
}
li {
    background-color:#efefef;
    border:1px solid gray;
    width:200px;
    margin:2px;
}
.selected_option {
    color:red;
}

JavaScript

var change_label = function () {
    var option = $(".selected_option a").text();
    $("li:first span").text(option);
};


$("#container").on("click", "li", function () {
    var self = $(this);
        $(".sel").children("li").removeClass("selected_option");

        self.addClass("selected_option");

});





$("#container").on("click", "li", function () {

    change_label();

});