I was adding a MutationObserver in my JavaScript code and applied it to a specific element in an iFrame. The detection works fine but now I need a second observer. After the first click in the iFrame the whole DOM of it changes and that's the moment where the first observer comes in and detects any other clicks on the navigation elements in the iFrame. Additionally to that I need to observe one div element and if it's text will be changed or not. So the idea was to create a second observer after a navigation button is clicked but it seems not to work since the second observer doesn't give any output on my console.

Here is the JavaScript code:

$('iframe').on('load', function() {
        let observer = new MutationObserver(mutationRecords => {
            let completed = false;
            var progress = $('iframe').contents().find('.overview-sidebar__header .progress-bar__percentage-bottom').first();
            let clickedClass = mutationRecords[0].target.attributes[0].nodeValue;
            
            if(clickedClass == 'transition-group') {
                console.log(progress.text());
                
                console.log(Math.ceil(Date.now() / 1000));
            } else if(clickedClass == 'page-wrap' && !mutationRecords[0].nextSibling) {
                let secondObserver = new MutationObserver(mutationRecords => { console.log('Test') });

                secondObserver .observe($('iframe').contents().find('.transition-group').first()[0], {
                    childList: true,
                    subtree: true
                });

                console.log(Math.ceil(Date.now() / 1000));
                
                $('iframe').contents().find('.section-lists .lesson-lists__item').each(function(index) {
                    console.log(index);
                    console.log($(this).find('.lesson-link__name > span').first().text());
                    
                    console.log($(this).find('.lesson-link__progress title').text().split('%')[0]);
                });
            }
        });
        
        observer.observe($('iframe').contents().find('.transition-group').first()[0], {
            childList: true,
            subtree: true
        });
    });

The secondObserver in the else if branch is the problem here. Anyone has an idea how to solve this?