JavaScript I need help with select options javascript code.

[HBNA]

Hi I have this code in the head section of my page:

<script src="https://cdn.jsdelivr.net/npm/@feathery/react@latest/umd/index.js"></script>
<script>
    (() => {
        Feathery.init('mykey'); // Replace 'mykey' with your actual Feathery SDK key

        const formMap = {
            'form1': 'PB Home Purchase', // Replace 'Form 1 Name' with the actual name of the form
            'form2': 'PB Refinance', // Replace 'Form 2 Name' with the actual name of the form
            'form3': 'PB Contact', // Replace 'Form 3 Name' with the actual name of the form
            'form4': 'PB Contact' // Replace 'Form 4 Name' with the actual name of the form
            // Additional form names can be mapped here
        };

        function handleSelectChange() {
            const formType = document.getElementById('formSelector').value;
            if (formType) {
                openPopup(formType);
            }
        }

        function openPopup(formType) {
            const popup = document.getElementById('popup');
            const existingContainer = document.getElementById('container');

            // Remove the existing container if it exists
            if (existingContainer) {
                existingContainer.parentNode.removeChild(existingContainer);
            }

            // Create a new container and append it to the popup
            const newContainer = document.createElement('div');
            newContainer.id = 'container';
            newContainer.style.position = 'absolute';
            newContainer.style.top = '50%';
            newContainer.style.left = '50%';
            newContainer.style.transform = 'translate(-50%, -50%)';
            popup.appendChild(newContainer);

            // Render the form in the new container
            Feathery.renderAt('container', { formName: formMap[formType] });
            popup.style.display = 'block';
        }

        function closePopup() {
            document.getElementById('popup').style.display = 'none';
        }

        window.handleSelectChange = handleSelectChange;
        window.closePopup = closePopup;
    })();
</script>

Then in the body of my page I have this code:

<div id='popup' style='display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5);' onclick="closePopup()">
    <div id='container' style='position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);background-color: white;' onclick="event.stopPropagation()">
        <!-- Dynamic form will be rendered here -->
    </div>
</div>

<!-- Dropdown for selecting form type -->
<select id="formSelector" onchange="handleSelectChange()">
    <option value="">CHOOSE AN OPTION</option>
    <option value="" style="font-size:3pt;" disabled>&nbsp;</option>
    <option value="form1" style="height:20px;">Option 1</option>
    <option value="" style="font-size:3pt;" disabled>&nbsp;</option>
    <option value="form2">Option 2</option>
    <option value="" style="font-size:3pt;" disabled>&nbsp;</option>
    <option value="form3">Option 3</option>
    <option value="" style="font-size:3pt;" disabled>&nbsp;</option>
    <option value="form4">Option 4</option>
    <!-- Additional options can be added here -->
</select>

I have a few issues I just can't figure out.

1. The first form (Option 1) works just fine but when I open the other forms (Options 2-4) and then click in on the forms, the forms just close. I can't move on through the form. Every time I try, they just close.

2. When I click on an Option to open a form, the form opens up, then I click off the form, it closes as it should. But then when I click on the same option to open the same form I just previously opened, the form does not open. The only way to open up the same form I just closed is to select another Option, open that form and then close it (or click off of it) and then go back to the previous Option (form) I opened up.

Please help.

Thank you

 

[HBNA]

Nevermind, I fured it out.