Ticket ID not being pass through other model or other page

Hello everyone,

I would like to ask for help about my issue.

I am developing custom app inside the ticket interface.
I got challenge when displaying ticket id after user view any ticket that are available, for example ticket id = 208, so when I open my app it should capture or automatically load the ticket id. So I test various logic to make it appear, now I am able make it appear only if user click any button for it to trigger. This is on index.html file. (First Layer Form)

Second issue is, my createticket.html file (Second Layer Form). In here I want the ticket Id being automatedly display but still same issue like the index.html file.

I will provide my index code first, if you need my second code, feel free to inform me.

this is code snippets for my index.html

<div class="ticket-id" id="ticket-id-display">
        <p><strong>Freshdesk Ticket ID:</strong> <span id="ticket-id"></span></p>
    </div>

 async function openModal(action) {
            let templatePath = '';
            let title = 'Sample Modal';
            let data = {};

            switch (action) {
                case 'view':
                    templatePath = './views/viewticket.html';
                    break;
                case 'create':
                    templatePath = './views/createticket.html';
                    title = 'Create Ticket';
                    try {
                        const ticket = await client.data.get('ticket');
                        data.ticketId = ticket.ticket.id;
                        console.log('Fetched ticket ID:', data.ticketId);
                        document.getElementById('ticket-id').textContent = data.ticketId;
                    } catch (error) {
                        console.error('Error fetching ticket data:', error);
                    }
                    break;
                case 'update':
                    templatePath = './views/updateticket.html';
                    break;
                case 'sync':
                    templatePath = './views/syncticket.html';
                    break;
                default:
                    console.error('Invalid action:', action);
                    return;
            }

            try {
                client.interface.trigger('showModal', {
                    title: title,
                    template: templatePath,
                    data: data
                }).then(function(data) {
                    console.log('Modal closed successfully:', data);
                }).catch(function(error) {
                    console.error('Error displaying modal:', error);
                });
            } catch (error) {
                console.error('Error triggering modal:', error);
            }
        }

        // Ensure Freshworks client is initialized
        async function initFreshworksClient() {
            try {
                await client.init();
                console.log('Freshworks client initialized successfully');
                // Fetch and display ticket ID on page load
                const ticket = await client.data.get('ticket');
                document.getElementById('ticket-id').textContent = ticket.ticket.id;
            } catch (error) {
                console.error('Error initializing Freshworks client:', error);
            }
        }

       
        fetchData();

      
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM fully loaded and parsed');
            initFreshworksClient();
        });

AfterClickButton

CreateTicket

TicketID