Looping elements and sequentially clicking on children

I'm trying to automate a task through Firefox's console in Developer Tools by running some jQuery code.

First, an example of the nodes I need to loop through. Note inline comments. There are nodes where the button has a span that doesn't contain the word Cycling and should be skipped.

<div class="ActivityListItem_activityType__qQkN4">
    <button>
        <span class="ActivityListItem_activityTypeText__jWs2o">Cycling</span>
        <span class="InlineEditDropdown_iconPointerDown__0bK4V ActivityListItem_isHidden__2pG6N"><i
                class="icon-pointer-down"></i>
        </span>
    </button>

    <!-- dynamically added after clicking above button -->
    <ul class="InlineEditDropdown_dropdownContainer__E5M6g" role="menu">
        <!-- omitted children li -->
        <li class="InlineEditDropdown_dropdownItem__WkY6H null null" tabindex="0"><a href="#" role="menuitem">Mountain Biking</a></li>
        <!-- omitted children li -->
    </ul>
</div>

The steps that seem to need to be replicated:

1. click the button, which fires and event and makes a list appear
2. from the list, click the option wanted which fires another event

The script I'm running in the console:

var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
document.head.appendChild(script);

var x = 0;
//select using start of the class name
$('div[class^="ActivityListItem_activityType"]').each(function(x){
    //alert("here..."+x); //outputs incremented value
    
    //click to make the list appear
    $(this).children('button span:contains("Cycling")').click();
    
    //click the right li to launch event
    $(this).children('ul li a:contains("Mountain Biking")').click();
});

No errors, but I'm not seeing much happen either (other than the alert when it's enabled).

Assuming my selectors are wrong? Perhaps I'm misunderstanding how to use .children()?

There seem to be two issues with your code.

First, note that children() only selects direct children of the element, i.e. one level down the DOM. To select nested elements, you need to use find().

Second, there might be a timing issue, because the <ul> structure is dynamically created when you click the "Cycling" button, though your code expects the <ul> structure to already be there right after you execute click() on the button. To ensure the structure is there to click it, you might use a Mutation Observer that observes subtree changes on the <div> to react to the creation of the <a>.