JSFiddle - React, Tailwind, and code Playground

HTML

<form id="test" action="">
                <ul id="chk">
                    <li id="hr" title="add one">One</li>
                    <li title="add two ">Two</li>
                    <li title="add three">Three</li>
                </ul>
                <br />
                <input id="chkResult" type="text" />       
            </form>

CSS

ul li{list-style:none; float:left; margin-right:20px; cursor:pointer}
            ul li.active{text-decoration:underline}

JavaScript

$(function () {
    //Checkboxes
    $("#chk>li").click(function () {
        if($(this).hasClass("active")) {
            $(this).attr('title', 'Remove one');
            $(this).attr('title', 'Add one');
            if($("#chkResult").val() != "") {
                $("#chkResult").val();
            }
        } else {
            $(this).attr('title', 'Remove one');
            if($("#chkResult").val() == "") {
                $("#chkResult").val($(this).html());
            } else {
                $("#chkResult").val($("#chkResult").val() + "," + $(this).html());
            }
        }
        $(this).toggleClass("active");
    });
    //Checkboxes
});