Issue with Updating Iframe Source in HTML Based on Record Selection

function onloadalert(executionContext) {
    var formContext = executionContext.getFormContext();

    // Get the Case ID (assuming it's stored in the 'incidentid' field)
    var caseid = formContext.getAttribute("msdyn_subject").getValue();
    if (caseid) {
        // Call the onloadalert function and pass the Case ID
        console.log(caseid);
    } else {
        console.log("Case ID is not available.");
    }

    var sidePane = Xrm.App.sidePanes.getPane("ReservationList");
    if (sidePane) {//If the pane is already open, just navigate to the page
        var pageInput = {
            pageType: "webresource",
            webresourceName: "dd_dynamichtml",
            data: encodeURIComponent(`recordId=${caseid}`)
        };
        sidePane.navigate(pageInput);
        Xrm.App.sidePanes.state = 1;
        return;
    }
    
    // Create the side pane
    Xrm.App.sidePanes.createPane({
        title: "Copilot",
        imageSrc: "WebResources/dd_chatgpticon", // Image for the side pane
        paneId: "ReservationList",
        canClose: false
    }).then((pane) => {

        // Add the iframe content to the side pane
        pane.navigate({
            pageType: "webresource",
            webresourceName: "dd_dynamichtml", // The name of the web resource containing the HTML
            //data: iframeHtml // Pass the dynamically generated iframe HTML as data
            data: encodeURIComponent(`recordId=${caseid}`)
        });
    });

    Xrm.App.sidePanes.state = 1; // Ensure the pane is opened
}

<!DOCTYPE html>
<html>
<script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>
<script>


    function getQueryParam(param) {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get(param);
    }

    function getDecodedQueryStringParameter(param) {

        const data = getQueryParam('data');

        if (data) {
            const decodedData = decodeURIComponent(data);
            const decodedParams = new URLSearchParams(decodedData);
            return decodedParams.get(param);
        }

        return null;
    }


    document.addEventListener('DOMContentLoaded', function () {
        // Function to get the value of a specific query parameter
        console.log("DOM fully loaded and parsed");
        configureCopilotURL();
    });


    async function configureCopilotURL() {
        const recordId = getDecodedQueryStringParameter('recordId').replace("{", "").replace("}", "");

        const copilotUrl = `https://copilotstudio.microsoft.com/environments/envid/bots/documentComparisionBot/webchat?__version__=2&caseId=${recordId}`

        // Set the iframe's src to the URL obtained from the query parameter
        if (copilotUrl) {
            console.log(copilotUrl);    
            document.getElementById('caseCopilot').src = copilotUrl;
        }
    }


</script>

<style>
    html,
    body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
    }

    iframe {
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <iframe id="caseCopilot" frameborder="0" style="width: 100%; height: 100%;"></iframe>
</body>

</html>

Below are the webresources I am using for Javascript and HTML.

SetUp: Jscript resource is linked to onload event for a form, when I click on a record, the html gets called and copilot side panel open

Issue: When I open the first record, the correct URL parameters are called, and the chat displays correctly. However, when I go back and select a second record, the chat still shows the first record’s information. If I open the second record in a new tab, it loads correctly, but it fails to refresh in the same tab.

Why is the URL not opening correctly if open in same tab? if the second record is opened in new tab, it works fine.