// Get all modal triggers (anchors)
var triggers = document.getElementsByClassName('modal-trigger');

// Loop through all triggers
for (var i = 0; i < triggers.length; i++) {
    // Add click event listener to each trigger
    triggers[i].addEventListener('click', function() {
        // Get the target modal id from the data attribute
        var targetModalId = this.getAttribute('data-target'); // Use data-target instead of id

        // Get the target modal element
        var targetModal = document.getElementById(targetModalId);
        // Display the target modal
        targetModal.style.display = "block";
    });
}


// Get all close buttons
var closeButtons = document.getElementsByClassName('close');

// Loop through all close buttons
for (var i = 0; i < closeButtons.length; i++) {
    // Add click event listener to each close button
    closeButtons[i].addEventListener('click', function() {
        // Get the parent modal element
        var parentModal = this.parentElement.parentElement.parentElement;
        // Hide the parent modal
        parentModal.style.display = "none";
    });
}

// Close modal when clicking outside of it
window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
        event.target.style.display = "none";
    }
}
