JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li> <a href="#" class="scene expanded checked">Introduction</a>

    </li>
    <li class="active-section"> <a class="expanded">The Section 2</a>

        <ul style="display: block;">
            <li> <a href="#" data-id="2" class="scene checked">Introduction</a>

            </li>
            <li> <a href="#" data-id="3" class="scene unchecked ">The Health Care Delivery System</a>

            </li>
            
            <li> <a href="#" data-id="4" class="scene unchecked">Determining Payments from External Customers</a>

            </li>
            <li> <a href="#" data-id="5" class="scene unchecked">Checkpoint</a>

            </li>
        </ul>
    </li>
    <li> <a class="collapsed">Paying for Health Care</a>

        <ul class="collapsed" style="">
            <li> <a href="#" data-id="6" class="scene unchecked">Health Care Systems</a>

            </li>
            <li> <a href="#" data-id="7" class="scene unchecked">Find Savings with a Discount</a>

            </li>
            <li> <a href="#" data-id="8" class="scene unchecked">Checkpoint</a>

            </li>
            <li> <a href="#" data-id="9" class="scene unchecked selected">Defects in Ice Skate Pairs</a>

            </li>
        </ul>
    </li>
    <li> <a href="#" data-id="22" class="collapsed scene unchecked">Summary</a>

    </li>
</ul>

CSS

li > a.selected {
    background-color: yellow;
}

li.active-section {
    background-color: lightgrey;
}

JavaScript

$(function () {
    var innerIndex = $("li.active-section li > a.selected").parent().index()
    $(document).on('click', 'li')
    $("body > ul:last").after("<br><p>The index of the selected li is " + innerIndex + "</p>");
});