Dynamically added Textarea focus() not working CHROME EXTENSION

I have seen tons of question that are close but it seems I am missing something.

I am appending an html div tag when a button is clicked. The appended div tag has a textarea tag that should get focus.

the script:

$('.todosContainer').on('click', '.ion-ios-close-outline', function () {
    let myTodoTemplate = `
                    <div class="oneTodoTemplate attached">
                        <textarea id="todoInput" name="name" placeholder="what shall be done?" rows="1" cols="80"></textarea>
                    </div> `;

    $('.todosContainer').append(myTodoTemplate);
    $('.attached').fadeIn(400).first().focus();
}

I also tried:

$('.attached').fadeIn(400, function() {
    $(this).find(">:first-child").focus();
});

The html:

<div class="todosContainer">

</div>