document.addEventListener("DOMContentLoaded", function() {
    const addFieldButton = document.getElementById("add-field"); // The plus button
    const removeFieldButton = document.getElementById("remove-field"); // The minus button
    const sectionOne = document.querySelector(".sec_one"); // The section to clone

    // Function to clone the section
    function cloneSection() {
        const clonedSection = sectionOne.cloneNode(true); // Clones the entire section
        const parent = sectionOne.parentNode; // Get the parent to append the clone
        parent.appendChild(clonedSection); // Append the cloned section to the parent
    }

    // Function to remove the last cloned section
    function removeSection() {
        const sections = document.querySelectorAll(".sec_one"); // Get all sections
        if (sections.length > 1) { // Ensure there's more than one section before removing
            sections[sections.length - 1].remove(); // Remove the last section
        }
    }

    // Add click event listeners to the buttons
    addFieldButton.addEventListener("click", cloneSection);
    removeFieldButton.addEventListener("click", removeSection);
});


//----------------------- cloned with default values----------------------------------------------//

// Get the section to clone
const sectionToClone = document.querySelector('.sec_one');

// Get the plus button to add a new section
const addButton = document.getElementById('add-field');

// Add event listener for adding a new section
addButton.addEventListener('click', () => {
    // Clone the section without copying the form data
    const newSection = sectionToClone.cloneNode(true);

    // Clear all input fields in the cloned section
    const inputs = newSection.querySelectorAll('input, select'); // Select all input fields and dropdowns
    inputs.forEach(input => {
        if (input.type === 'number') {
            input.value = ''; // Reset input fields
        } else if (input.tagName === 'SELECT') {
            input.selectedIndex = 0; // Reset the dropdown to the first option
        }
    });

    // Optionally, you can give the cloned section a unique class or id if needed
    newSection.classList.remove('hidden');  // Make the section visible if it was hidden

    // Append the cloned section to the container
    const container = document.querySelector('.content');
    container.appendChild(newSection);
});

// Remove section when the minus button is clicked
const removeButton = document.getElementById('remove-field');
removeButton.addEventListener('click', () => {
    const sections = document.querySelectorAll('.sec_one');
    if (sections.length > 1) { // Only remove if there's more than 1 section
        sections[sections.length - 1].remove();
    }
});