I’m getting ‘undefined’ for one of my html pages. My cookies are supposed to display the information on that page

The goal of this assignment is to: capture user data on the registration.html page, transfer it to the interests.html page through hidden fields, save both sets of input in cookies when the form is submitted, and then display all the combined information on the confirm.html page.

Here is my javascript code for interests.html:

<script>
 // Get query parameters from the URL
        document.addEventListener("DOMContentLoaded", function() {
            const queryParams = new URLSearchParams(window.location.search);

            // Populate hidden fields with data from registration.html
            document.getElementById("hiddenUserName").value = queryParams.get("userName");
            document.getElementById("hiddenPassword").value = queryParams.get("password");
            document.getElementById("hiddenPasswordVerify").value = queryParams.get("passwordVerify");
            document.getElementById("hiddenFirstName").value = queryParams.get("firstName");
            document.getElementById("hiddenLastName").value = queryParams.get("lastName");
            document.getElementById("hiddenEmail").value = queryParams.get("email");
            document.getElementById("hiddenPhoneNumber").value = queryParams.get("phoneNumber");
           
            }); 
            // Submit event handler to save data into cookies
           function sanitizeInput(input) {
            return input.replace(/</g, "&lt;").replace(/>/g, "&gt;");
        }

        document.addEventListener("DOMContentLoaded", function() {
            const interestsForm = document.getElementById("interestsForm");

            interestsForm.addEventListener("submit", function(event) {
                const formElements = interestsForm.elements;
                for (const element of formElements) {
                    if (element.type !== "submit") {
                        const sanitizedValue = sanitizeInput(element.value);
                        const cookieValue = encodeURIComponent(sanitizedValue);
                        document.cookie = `${element.name}=${cookieValue}; path=/`;
                    }
                }
            });
        });
</script>
    

Here is my code for confirm.html

    <ul id="userInfo">
        <!-- JavaScript will populate this list -->
    </ul>

    

    </section>

    <footer>This events site is for IT-FP3215 tasks.
    </footer>
    
    <script>
         document.addEventListener("DOMContentLoaded", function() {
            const userInfoList = document.getElementById("userInfo");

            // Read and display user information from cookies
            const cookies = document.cookie.split("; ");
            for (const cookie of cookies) {
                const [name, value] = cookie.split("=");
                userInfoList.innerHTML += `<li><strong>${name}:</strong> ${decodeURIComponent(value)}</li>`;
            }
        });
</script> 

I was trying to display all of the information on the confirm.html page using cookies but it didn’t work. The confirm.html page is showing “undefined”.