jquery sortable on nested list not initializing

In my setup I have a sortable list, nested inside another sortable list. see the HTML setup below

My problem is, the sortable children list, doesnt get initialised.

There is no info or error in the console.

In examples around stackoverflow and the net that I found, I see that people just init two sortables after another. But I cant get it to work like this.

I tried different options using different settings for "item", "containment", "connectWith", but with no luck.

I also tried using only one sortable init function, on both lists. But with this setup I had the problem, that the "containment" setting on the child list, was not working. So I could drag the children li´s into the parent list.

I also tried, changing the HTML of the children, from UL to just a DIV layout, so that the item selector doesnt target the child li´s, but that wasnt working either. I had the same problem as with the lists.

HTML example setup:

<ul class="fieldset-list">

    <li class="fieldset"><!-- these list items should be sortable -->
        <a href="#" class="handle-fieldset">Handle</a>
        <input type="text">
        <ul class="options-list">
         
            <li class="option"><!-- these list items should be sortable -->
                <a href="#" class="handle-option">Handle</a>
                <input type="text">
            </li>
            
        </ul>
    </li>

    <li class="fieldset"><!-- these list items should be sortable -->
        <a href="#" class="handle-fieldset">Handle</a>
        <input type="text">
        <ul class="options-list">
        
            <li class="option"><!-- these list items should be sortable -->
                <a href="#" class="handle-option">Handle</a>
                <input type="text">
            </li>

            <li class="option"><!-- these list items should be sortable -->
                <a href="#" class="handle-option">Handle</a>
                <input type="text">
            </li>
            
        </ul>
    </li>
    
</ul>

jQuery setup:

$( '.fieldset-list' ).sortable({
    axis: 'y',
    items: '> li', // shouldnt this target only the first level of li´s ? it seems to target the children also
    handle: '.handle-fieldset',
    //tolerance: 'pointer',
    //containment: 'parent',
});
$( '.fieldset-list' ).disableSelection();

// this sortable init doesnt even fire
$( '.options-list' ).sortable({
    axis: 'y',
    handle: '.handle-option',
    //items: '> li', // no change if I enable this
    //tolerance: 'pointer',
    //containment: '.options-list',
    //containment: 'parent',
    //connectWith: '.fieldset-list',
});
$( '.options-list' ).disableSelection();

Both UL elements are present in the HTML from the start. If I add new items to the parent or children list, everytime I call *.sortable( 'refresh' );