I have two videos embedded on a WordPress site built in Elementor. Each button hides an image and reveals a video embed. Button 1 needs to play Video 1, Button 2 needs to play Video 2, etc. Right now, both buttons play Video 1 because the videos are accessed via querySelectorAll which I know stores them as an array. What I can’t figure out is how to iterate through them so each button plays its respective video.

j(".image-video-swap .play").click(function(){
    var video = document.querySelectorAll('iframe[src^="https://www.youtube.com/embed/"]');
    if (j(this).closest('.image-video-swap').find(".video-column .elementor-element:visible").next().length != 0)
        j(this).closest('.image-video-swap').find(".video-column .elementor-element:visible").fadeOut(function(){
            j(this).next().fadeIn();
                video.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
                video.contentWindow.postMessage('{"event":"command","func":"mute","args":"1"}', '*');
                video.contentWindow.postMessage('{"event":"command","func":"setLoop","args":"1"}', '*');
        });
    else {
        j(this).closest('.image-video-swap').find(".video-column .elementor-element:visible").fadeOut(function(){
            j(this).closest('.image-video-swap').find(".video-column .elementor-element:first").fadeIn();
                video.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');
                video.contentWindow.postMessage('{"event":"command","func":"mute","args":"0"}', '*');
                video.contentWindow.postMessage('{"event":"command","func":"setLoop","args":"1"}', '*');
        });
    }
    return false;
});