Кастомный select в виде аккордиона

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Кастомный Select</title>
</head>
<body>
      <input type="hidden" name="category" id="hidden_category" value="">
       <div class="custom-multiselect">
        <div class="custom-selected" id="selected-items">
            <!-- Выбранные элементы будут добавлены сюда -->
        </div>
        <div class="custom-optgroup">
            <details>
                <summary>Фрукты</summary>
                <div class="custom-option" data-value="apple">Яблоко</div>
                <div class="custom-option" data-value="banana">Банан</div>
                <div class="custom-option" data-value="orange">Апельсин</div>
            </details>
        </div>
        <div class="custom-optgroup">
            <details>
                <summary>Овощи</summary>
                <div class="custom-option" data-value="carrot">Морковь</div>
                <div class="custom-option" data-value="potato">Картофель</div>
                <div class="custom-option" data-value="onion">Лук</div>
            </details>
        </div>
        <div class="custom-optgroup">
            <details>
                <summary>Напитки</summary>
                <div class="custom-option" data-value="water">Вода</div>
                <div class="custom-option" data-value="tea">Чай</div>
                <div class="custom-option" data-value="coffee">Кофе</div>
            </details>
        </div>
    </div>
</body>
</html>

CSS

body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .custom-multiselect {
            width: 300px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            background: #f9f9f9;
        }

        .custom-selected {
            margin-bottom: 10px;
            min-height: 20px;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: #fff;
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }

        .selected-item {
            padding: 3px 7px;
            background: #e6f7ff;
            border: 1px solid #91d5ff;
            border-radius: 3px;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .selected-item span {
            cursor: pointer;
            color: #ff4d4f;
            font-weight: bold;
        }

        .custom-optgroup {
            margin: 10px 0;
        }

        .custom-optgroup summary {
            list-style: none;
            font-weight: bold;
            margin-bottom: 5px;
            cursor: pointer;
        }

        .custom-optgroup details[open] summary::after {
            content: "▲";
            float: right;
        }

        .custom-optgroup details:not([open]) summary::after {
            content: "▼";
            float: right;
        }

        .custom-option {
            padding: 5px 10px;
            cursor: pointer;
        }

        .custom-option:hover {
            background: #e6f7ff;
        }

        .custom-option.selected {
            background: #bae7ff;
        }

JavaScript

const selectedItemsContainer = document.getElementById('selected-items');
        const hiddenInput = document.getElementById('hidden_category');

        // Обработчик выбора элемента
        document.querySelectorAll('.custom-option').forEach(option => {
            option.addEventListener('click', () => {
                const value = option.dataset.value;
                const text = option.innerText;

                if (option.classList.contains('selected')) {
                    // Если элемент уже выбран, удаляем его
                    option.classList.remove('selected');
                    removeSelectedItem(value);
                } else {
                    // Добавляем новый выбранный элемент
                    option.classList.add('selected');
                    addSelectedItem(value, text);
                }

                // Обновляем значение в скрытом input
                updateHiddenInput();
            });
        });

        // Добавление выбранного элемента в контейнер
        function addSelectedItem(value, text) {
            const item = document.createElement('div');
            item.className = 'selected-item';
            item.dataset.value = value;
            item.innerHTML = `${text} <span data-value="${value}">×</span>`;
            selectedItemsContainer.appendChild(item);

            // Обработчик удаления
            item.querySelector('span').addEventListener('click', () => {
                removeSelectedItem(value);
                document.querySelector(`.custom-option[data-value="${value}"]`).classList.remove('selected');
                updateHiddenInput();
            });
        }

        // Удаление выбранного элемента из контейнера
        function removeSelectedItem(value) {
            const item = selectedItemsContainer.querySelector(`.selected-item[data-value="${value}"]`);
            if (item) selectedItemsContainer.removeChild(item);
        }

        // Обновление значения в скрытом input
       ...