JSFiddle - React, Tailwind, and code Playground

by Nibin George

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 a', function(){
        var selected_id = $(this).parent().attr('id');
        alert(selected_id)
  });
});