JSFiddle - React, Tailwind, and code Playground

by prasad raja

HTML

<ul class='category'>
            <h4>
                Category</h4>
            <a href="#">
                <li class="selected">Link 1</li></a> <a href="#">
                    <li>Link 2</li></a> <a href="#">
                        <li>Link 3</li></a> <a href="#">
                            <li class="selected">Link 4</li></a> <a href="#">
                                <li class="selected">Link 5</li></a> <a href="#">
                                    <li>Link 6</li></a> <a href="#">
                                        <li>Link 7</li></a>
        </ul>
        <h3>
            <span class="items"></span>
        </h3>

CSS

.selected
{background:yellow;}

JavaScript

$(function () {
            $("li").click(function () {
                $(this).toggleClass("selected");
                appendItems();
            });

            function appendItems() {
                var selecteditem = "", lement, appementElement = ", ";
                lement = $(".selected").size();
                $(".selected").each(function (index) {
                    if ((lement - 1) == index) {
                        appementElement = "";
                    }
                    selecteditem = selecteditem + ($(this).text() + appementElement);
                });
                $(".items").html("").append(selecteditem);
            }
        });