JSFiddle - React, Tailwind, and code Playground

by Barry Margolin

HTML

<ul class="nav nav-pills nav-stacked navigation" id="configuration_sidebar_content">
    <li> <a>Location</a>

        <ul class="nav nav-pills nav-stacked " id="location" style="padding-left:30px;">
            <li class="active" id="Region"><a href="#region">Region</a>

            </li>
            <li id="country"><a href="#country">Country</a>

            </li>
            <li id="state"><a href="#state">State</a>

            </li>
        </ul>
    </li>
    <li id="device"> <a>Device</a>

        <ul class="nav nav-pills nav-stacked" style="padding-left:30px;">
            <li id="gateway_unit"><a href="#gateway-unit">Gateway Unit</a>

            </li>
            <li id="meter_unit"><a href="#meter-unit">Meter Unit</a>

            </li>
        </ul>
    </li>
    <li id="user"><a href="#user">Software User</a>

    </li>
    <li id="global_parameters"><a href="#global-parameters">Global Parameters</a>

    </li>
</ul>

JavaScript

$(function () {
    $('#configuration_sidebar_content').on('click', 'li', function (e) {
        e.stopPropagation();
        var children = $(this).find("li");
        var ids;
        if (children.length) {
            ids = $.makeArray(children.map(function () {
                return this.id;
            }));
        } else {
            ids = [this.id];
        }
        alert(ids.join(', '));
    });
});