how do i dynamically load content into an iframe

I have some code that should dynamically load an iframe. The issue is i have a function that should make it cascade to the next id appended to the iframe. I need someone to help pinpont the issue with my code.

    const $iframe = $("#content-frame");
                $($iframe).attr('src', cath);

         var cath = 'https://exanple.com' + myIds[i]+ '/embed/dynamic?';

                console.log(cath);


    const myIds=['1_aq4jiqb','1_4u0ocu4u'];
function switchId() {
for (let i = 0; i < myIds.length; i++) {
cath = 'https://www.exanple.com' + myIds[i]+ '/embed/dynamic?';

}
}
setInterval(function(){ switchId() }, 3000);
 
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>

        <iframe id="content-frame" src="" width="400px" height="400px"></iframe>