Проблема со скриптом для анимации jQuery

У меня есть скрипт для анимации текста при наведении на елемент:

var textWrapper = document.querySelector('.ml13');
var selectedElement = document.querySelector('.works__item');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
$(selectedElement).hover(function () {
    anime.timeline({
            loop: false
        })
        .add({
            targets: '.ml13 .letter',
            translateY: [100, 0],
            translateZ: 0,
            opacity: [0, 1],
            easing: "easeOutExpo",
            duration: 1400,
            delay: (el, i) => 300 + 30 * i
        })
});

И несколько элементов, но анимация работает только на первом элементе:

    <div class="works__item">
        <img class="works__photo" src="assets/img/places/p1.jpg" />
        <div class="works__content">
            <div class="works__title">
                <h1 class="ml16">Made with love</h1>
            </div>
            <!--works__title-->
            <div class="works_text">
                <h1 class="ml13">Rising Strong</h1>
            </div>
            <!--works_text-->
        </div>
        <!--works__content-->
    </div>
    <!--works__item-->
    <div class="works__item">
        <img class="works__photo" src="assets/img/places/p1.jpg" />
        <div class="works__content">
            <div class="works__title">
                <h1 class="ml16">Made with love</h1>
            </div>
            <!--works__title-->
            <div class="works_text">
                <h1 class="ml13">Rising Strong</h1>
            </div>
            <!--works_text-->
        </div>
        <!--works__content-->
    </div>
    <!--works__item-->

Нужен ваш совет, как сделать чтобы анимация работала на всех элементах.