document.addEventListener("DOMContentLoaded", function () {
    const addButtons = document.querySelectorAll('.addServiceButton');

    addButtons.forEach(function (button) {
        button.addEventListener('click', function () {
            const serviceId = button.getAttribute('data-service-id');
            const serviceTitle = button.getAttribute('data-service-title');

            const selectTag = document.getElementById('servicesSelectTag');
            const option = document.createElement('option');
            option.value = serviceId;
            option.text = serviceTitle;

            if (button.classList.contains('added')) {
                button.classList.remove('added');
                button.classList.remove('bg-red-500');
                button.classList.add('bg-osiblue');
                button.querySelector('p').textContent = "Add";
                const optionToRemove = selectTag.querySelector(`option[value="${serviceId}"]`);
                if (optionToRemove) {
                    selectTag.removeChild(optionToRemove);
                }
            } else {
                button.classList.add('added');
                button.classList.add('bg-red-500');
                button.querySelector('p').textContent = "Remove";
                selectTag.appendChild(option);
                option.selected = true;
            }
        });
    });
});