chrome-extension://idbainmjmlnifplnagecobnpjnmibflb/manage_personalities.html when i am on this tab the save button doesn't work as I wish.... heer is my folder structure:
Extension projects (main folder)
├── background.js
├── content.js
├── StaticButton.js
├── visualize_tweets.js
├── visualize_tweets.css
├── visualize_buttons.js
├── visualize_management.js
├── visualize_tweets.html
├── manage_personalities.html
├── manage_personalities.js
├── manage_personalities.css
├── icons
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
├── manifest.json
└── styles.css

this is the manage personalities html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Manage AI Personalities</title>
    <link rel="stylesheet" href="manage_personalities.css">
</head>
<body>
    <h1>AI Personalities</h1>
    <button id="addPersonalityButton">Add New Personality</button>
    <div id="personalitiesContainer">
        <!-- Personalities will be dynamically populated here -->
    </div>

    <!-- Modal for Adding/Editing Personalities -->
    <div id="personalityModal" class="modal">
        <div class="modal-content">
            <span class="close-button">&times;</span>
            <h2 id="modalTitle">Add Personality</h2>
            <form id="personalityForm">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>

                <label for="description">Description:</label>
                <textarea id="description" name="description" required></textarea>

                <label for="allowedEmojis">Allowed Emojis (comma-separated):</label>
                <input type="text" id="allowedEmojis" name="allowedEmojis" placeholder="e.g., 😊, 🚀">

                <label for="excludedEmojis">Excluded Emojis (comma-separated):</label>
                <input type="text" id="excludedEmojis" name="excludedEmojis" placeholder="e.g., 💔, 😢">

                <button type="submit" id="savePersonalityButton">Save</button>
            </form>
        </div>
    </div>

    <script src="manage_personalities.js"></script>
</body>
</html>

and this is .js
// manage_personalities.js

document.addEventListener('DOMContentLoaded', () => {
    const addPersonalityButton = document.getElementById('addPersonalityButton');
    const personalitiesContainer = document.getElementById('personalitiesContainer');
    const personalityModal = document.getElementById('personalityModal');
    const modalTitle = document.getElementById('modalTitle');
    const personalityForm = document.getElementById('personalityForm');
    const closeButton = document.querySelector('.close-button');
    const savePersonalityButton = document.getElementById('savePersonalityButton');

    let editIndex = null; // To track which personality is being edited

    // Load and display existing personalities
    function loadPersonalities() {
        chrome.storage.local.get(['aiPersonalities'], (result) => {
            const personalities = result.aiPersonalities || [];
            personalitiesContainer.innerHTML = '';

            personalities.forEach((personality, index) => {
                const personalityDiv = document.createElement('div');
                personalityDiv.classList.add('personality');
                personalityDiv.innerHTML = `
                    <h3>${personality.name}</h3>
                    <p class="description">${personality.description}</p>
                    <p class="emojis"><strong>Allowed Emojis:</strong> ${personality.allowedEmojis.join(', ') || 'None'}</p>
                    <p class="emojis"><strong>Excluded Emojis:</strong> ${personality.excludedEmojis.join(', ') || 'None'}</p>
                    <button class="edit-button" title="Edit">&#9998;</button>
                    <button class="delete-button" title="Delete">&#10060;</button>
                `;

                // Edit Button Event
                personalityDiv.querySelector('.edit-button').addEventListener('click', () => {
                    openModal('edit', personality, index);
                });

                // Delete Button Event
                personalityDiv.querySelector('.delete-button').addEventListener('click', () => {
                    deletePersonality(index);
                });

                personalitiesContainer.appendChild(personalityDiv);
            });
        });
    }

    // Open Modal for Adding or Editing
    function openModal(mode, personality = {}, index = null) {
        personalityModal.style.display = 'block';
        if (mode === 'add') {
            modalTitle.textContent = 'Add New Personality';
            personalityForm.reset();
            editIndex = null;
        } else if (mode === 'edit') {
            modalTitle.textContent = 'Edit Personality';
            document.getElementById('name').value = personality.name;
            document.getElementById('description').value = personality.description;
            document.getElementById('emojis').value = personality.allowedEmojis.join(', ');
            document.getElementById('excludedEmojis').value = personality.excludedEmojis.join(', ');
            editIndex = index;
        }
    }

    // Close Modal
    function closeModal() {
        personalityModal.style.display = 'none';
    }

    // Save Personality (Add or Edit)
    personalityForm.addEventListener('submit', (e) => {
        e.preventDefault();

        const name = document.getElementById('name').value.trim();
        const description = document.getElementById('description').value.trim();
        const allowedEmojis = document.getElementById('emojis').value.trim().split(',').map(emoji => emoji.trim()).filter(emoji => emoji !== '');
        const excludedEmojis = document.getElementById('excludedEmojis').value.trim().split(',').map(emoji => emoji.trim()).filter(emoji => emoji !== '');

        if (name === '' || description === '') {
            alert('Name and Description are required.');
            return;
        }

        chrome.storage.local.get(['aiPersonalities'], (result) => {
            const personalities = result.aiPersonalities || [];

            if (editIndex !== null) {
                // Edit Existing Personality
                personalities[editIndex] = {
                    name,
                    description,
                    allowedEmojis,
                    excludedEmojis
                };
            } else {
                // Add New Personality
                personalities.push({
                    name,
                    description,
                    allowedEmojis,
                    excludedEmojis
                });
            }

            // Save Updated Personalities
            chrome.storage.local.set({ aiPersonalities: personalities }, () => {
                loadPersonalities();
                closeModal();
            });
        });
    });

    // Delete Personality
    function deletePersonality(index) {
        if (confirm('Are you sure you want to delete this personality?')) {
            chrome.storage.local.get(['aiPersonalities'], (result) => {
                const personalities = result.aiPersonalities || [];
                personalities.splice(index, 1); // Remove the personality
                chrome.storage.local.set({ aiPersonalities: personalities }, () => {
                    loadPersonalities();
                });
            });
        }
    }

    // Event Listeners for Modal
    closeButton.addEventListener('click', closeModal);
    window.addEventListener('click', (event) => {
        if (event.target == personalityModal) {
            closeModal();
        }
    });

    // Event Listener for Adding New Personality
    addPersonalityButton.addEventListener('click', () => {
        openModal('add');
    });

    // Load Personalities on Page Load
    loadPersonalities();
});


make it work as intended... I want to see a dropdown with all the personalities, and when I select a personality i'll see the description... and emojis to use or to avoid etc.. i can change this and save.. also this is displayed in the page itself and not in a popup. fix it