Вывод значений массива javascript в цикле for приводит к undefined

Я пытаюсь использовать цикл для вывода значений из двух массивов в функции зависания jQuery. Вне наведения я могу нормально получить доступ к этим значениям массива, но внутри я получаю undefined.

JavaScript для меня все еще в новинку, поэтому, пожалуйста, объясните мне любые мои ошибки новичка. Спасибо.

jQuery(document).ready(function($){
var originalWheelContent = $('.wheel-content').html(),
    transitionSpeed = 400,
    segmentTitle = ['collaborative','compassionate','inclusive','empowering','responsive'],
    segmentParagraph = [
        'Working together to deliver the best possible outcomes and recognises and values the contribution of others.',
        'Constantly looking for new ways to satisfy the needs of those you work with or care for. Acting with consideration and understanding for others feelings.',
        'Actively seeking and creating opportunities to include others, fostering an environment where everyone feels valued and respected.',
        'Enabling positive change and supporting others to reach their maximum potential.',
        'Reacting positively to change and others needs by being creative and innovative in finding solutions.'
    ];

for(x = 0; x < segmentTitle.length; x++){
    $('.wheel-graphic map area#' + segmentTitle[x]).hover(
        function(){
            $('.wheel-content').fadeOut(transitionSpeed,function(){
                $('.wheel-content').replaceWith('<div class = "wheel-content"><h2 class = "segment-title">' + segmentTitle[x] + '</h2><h4 class = "segment-p">' + segmentParagraph[x] + '</h4></div>');
            });
        }, function() {
            $('.wheel-content').fadeIn(transitionSpeed);
            $('.wheel-content').replaceWith('<div class = "wheel-content">' + originalWheelContent + '</div>');
        }
    );
   }
});