Jquery Ajax beforeSend loading animation

Hi everyone i have one problem with my ajax loading animation. The problem is when i hover any image the loading animation active under all images.

Like this FIDDLE

I want to make when i hover first image then .ajax-loading activated for only that image. and if i hover second image then .ajax-loading active for only second image ext..

Anyone can help me here ? CSS

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

.ajax-loading.active {
    opacity: 1;
    z-index: 100;
}

and AJAX

$(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();
    });
});