Jquery Ajax beforeSend loading animation

大家好，我的 ajax 加载动画有一个问题。问题是当我悬停在任何图像上时，加载动画在所有图像下处于活动状态。

像这个小提琴

我想在悬停第一张图像时制作，然后.ajax-loading仅为该图像激活。 如果我悬停第二张图像，那么.ajax-loading仅对第二张图像扩展处于活动状态。

有人可以在这里帮助我吗？.CSS

.ajax-loading {
    transition: all 0.3s;
    opacity: 0;
    z-index: -1;    
}
.ajax-loading.active {
    opacity: 1;
    z-index: 100;
}

和阿贾克斯

$(document).ready(function () {
    function showProfileTooltip(e, id) {
        //send id & get info from get_profile.php 
        $.ajax({
            url: '/echo/html/',
            data: {
                html: response,
                delay: 0
            },
            method: 'post',
            beforeSend: function() {
                $('.ajax-loading').addClass('active');    
            },
            success: function (returnHtml) {
                e.find('.user-container').empty().html(returnHtml).promise().done(function () {
                    $('.the-container').addClass('loaded');
                });
            }
        }).complete(function() {
            $('.ajax-loading').removeClass('active');    
        });
    }
    function hideProfileTooltip() {
        $('.the-container').removeClass('loaded');
    }
    $('.the-container').hover(function (e) {
        var id = $(this).find('.summary').attr('data-id');
        showProfileTooltip($(this), id);
    }, function () {
        hideProfileTooltip();
    });
});