JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="ul-dropfree ul-treefree">
    <li>
        <p>1</p>
        <ul>
            <li>
                <p>1.1</p>
            </li>
            <li>
                <p>1.2</li>
            <li>
                <p>1.3</p>
                <ul>
                    <li>
                        <p>1.1.1</p>
                    </li>
                    <li>
                        <p>1.1.2</p>
                    </li>
                </ul>
            </li>
            <li>
                <p>1.4</p>
            </li>
        </ul>
    </li>
    <li>
        <p>2</p>
        <ul>
            <li>
                <p>2.1</p>
            </li>
            <li>
                <p>2.2</p>
                <ul>
                    <li>
                        <p>2.2.1</p>
                    </li>
                    <li>
                        <p>2.2.2</p>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

ul.ul-treefree {
    padding-left:25px;
    padding-top: 10px;
}
ul.ul-treefree ul {
    margin:0;
    padding-left:6px;
}
ul.ul-treefree li {
    position:relative;
    list-style:none outside none;
    margin:0;
    padding:0 0 0 19px;
    line-height:23px;
}

ul.ul-treefree li:last-child {
    border-left:0 none;
}

ul.ul-dropfree div.drop {
    width:12px;
    height:12px;
    position:absolute;
    z-index:10;
    top:9px;
    left:-12px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAALCAIAAAD0nuopAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpinDlzJgNlgAWI09LScEnPmjWLoAImrHpIAkwMFAMqGMGC6X44GzkIsHoQooAFTTVQKdbAwxOigyMsmIh3MC7ASHnqBAgwAD4CGeOiDhXRAAAAAElFTkSuQmCC');

    background-position:-11px 0;
    background-repeat:no-repeat;
    cursor:pointer;
}

JavaScript

$(document).ready(function() {
    $(".ul-dropfree").find("li:has(ul:has(li))").prepend('<div class="drop"></div>');
    $(".ul-dropfree div.drop").click(function() {
        if ($(this).nextAll("ul").css('display') == 'none') {
            console.log($(this).nextAll("ul >li>p").text());
            $(this).nextAll("ul").slideDown(400);
            $(this).css({
                'background-position': "-11px 0"
            });
        }
        else {
            $(this).nextAll("ul").slideUp(400);
            $(this).css({
                'background-position': "0 0"
            });
        }
    });
    $(".ul-dropfree").find("ul").slideUp(400).parents("li").children("div.drop").css({
        'background-position': "0 0"
    });
    jQuery.cookie = function(name, value, options) {

    if (typeof value != 'undefined') { // name and value given, set cookie

        options = options || {};

        if (value === null) {

            value = '';

            options.expires = -1;

        }

        var expires = '';

        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {

            var date;

            if (typeof options.expires == 'number') {

                date = new Date();

                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));

            } else {

                date = options.expires;

            }

            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE

        }

        // CAUTION: Needed to parenthesize options.path and options.domain

        // in the following expressions, otherwise they evaluate to undefined

        // in the packed version for some reason...

        var path = options.path ? '; path=' + (options.path) : '';

        var domain = options.domain ? '; domain=' + (options.domain) : '';

        var secure = options.secure ? '; secure' : '';

        document.cookie = [name, '=',...