//---------------ADD AND REMOVE SECTION BASED ON ACTION DROPDOWN--------------------//

// Add event listeners to dynamically add/remove sections

document.addEventListener("DOMContentLoaded", function() {
    // Add section for dropdown1-container
    document.querySelector(".dropdown1-container .add").addEventListener("click", function() {
        addSection('dropdown1-container');
    });

    // Remove section for dropdown1-container
    document.querySelector(".dropdown1-container .remove").addEventListener("click", function() {
        removeSection('dropdown1-container');
    });

    // Add section for dropdown2-container
    document.querySelector(".dropdown2-container .add").addEventListener("click", function() {
        addSection('dropdown2-container');
    });

    // Remove section for dropdown2-container
    document.querySelector(".dropdown2-container .remove").addEventListener("click", function() {
        removeSection('dropdown2-container');
    });
});

// Function to add a section
function addSection(containerClass) {
    // Get the container
    const container = document.querySelector(`.${containerClass}`);
    
    // Clone the first section of the container
    const newSection = container.cloneNode(true);
    
    // Remove the event listeners on the cloned section (optional)
    newSection.querySelector('.add').removeEventListener('click', addSection);
    newSection.querySelector('.remove').removeEventListener('click', removeSection);
    
    // Reset values of the cloned inputs if necessary
    const inputs = newSection.querySelectorAll('input, select');
    inputs.forEach(input => input.value = '');

    // Append the cloned section to the parent
    container.parentNode.appendChild(newSection);
}

// Function to remove a section
function removeSection(containerClass) {
    // Get all sections of the specific container
    const sections = document.querySelectorAll(`.${containerClass}`);
    
    // Only remove if there is more than one section
    if (sections.length > 1) {
        sections[sections.length - 1].remove();
    }
}