JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<div class = "testButton"> 
    <ul> 
        <li> 
            <a href="#" class="button" id="Button One"> Parent One </a> 
            <ul> 
                <li><a href="#" id="P1child">P1 child</a></li> 
                    <li><a href="#" id="P1child2">Another P1 child</a></li>
                </ul> 
                    <a href="#" class="button" id="Button Two"> Parent Two </a> 
                    <ul> 
                        <li> <a href="#" id = "P2 child">P2 child</a> </li> 
                    </ul> 
                    <a href="#" class="button" id = "Button Three"> Parent Three </a> 
                    <ul> 
                        <li> <a href="#" id = "P3 child">P3 child</a> </li> 
                    </ul> 
                    <a href="#" class="button" id = "Button Four"> Parent Four </a> 
                    <ul> 
                        <li> <a href="#" id = "P4 child">P4 child</a> </li> 
                    </ul>         
                </li> 
            </ul> 
        </div>

JavaScript

$('.button').click(function() {
    $(this).next('ul').children().each(function() {
        alert($(this).children('a').attr('id'));
    });
});