JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mob-subpages">
    <ul class="wrapper">
        <li><a href="#">Section 1</a></li>
        <li><a href="#">Section 2</a>

            <ul>
                <li><a href="#">Section 2.1</a>
                </li>
                <li><a href="#">Section 2.2</a>
                </li>
                <li><a href="#">Section 2.3</a> 
                </li>
            </ul>
        </li>
        <li><a href="#">Section 3</a></li>
    </ul>
    <br/>
    <br/>
</div>

JavaScript

// Create the dropdown base
$("<select />").appendTo(".mob-subpages");
var opt = "";
$(".wrapper").children('li').each(function () {

    if ($(this).find('ul').length !== 0) {
        opt += "<optgroup label=" + "'" + $(this).children().html() + "'" + ">";
        $(this).find('li').each(function () {
            opt += "<option>" + $(this).find('a').html() + "</option>";
        });
        opt += "</optgroup>";
    } else {
        opt += "<option>" + $(this).children().html() + "</option>";
    }
    console.log($(this).find('ul').length !== 0)


});
console.log(opt)
$(".mob-subpages select").append(opt)

$(".mob-subpages select").change(function () {
    window.location = $(this).find("option:selected").val();
});