update script.js to accept an unlimited number of links

script.js

@@ -1,31 +1,42 @@
 const form = document.getElementById('merge-form');
-const resultDiv = document.getElementById('result');
+        const calendars = document.getElementById('calendars');
+        const addCalendarButton = document.getElementById('add-calendar');
+        const result = document.getElementById('result');
 
-form.addEventListener('submit', (e) => {
+        let calendarIndex = 1;
-    e.preventDefault();
-    const cal1Url = document.getElementById('cal1-url').value;
-    const cal1Prefix = document.getElementById('cal1-prefix').value;
-    const cal2Url = document.getElementById('cal2-url').value;
-    const cal2Prefix = document.getElementById('cal2-prefix').value;
 
-    fetch('/merge', {
+        addCalendarButton.addEventListener('click', () => {
-        method: 'POST',
+            const newCalendar = document.createElement('div');
-        headers: {
+            newCalendar.className = 'calendar';
-            'Content-Type': 'application/json'
+            newCalendar.innerHTML = `
-        },
+                <input type="text" id="prefix-${calendarIndex}" placeholder="Prefix">
-        body: JSON.stringify({
+                <input type="url" id="url-${calendarIndex}" placeholder="Calendar URL">
-            cal1Url,
+            `;
-            cal1Prefix,
+            calendars.appendChild(newCalendar);
-            cal2Url,
+            calendarIndex++;
-            cal2Prefix
+        });
-        })
+
-    })
+        form.addEventListener('submit', (event) => {
-    .then(response => response.json())
+            event.preventDefault();
-    .then((data) => {
+            const calendarsData = [];
-        resultDiv.innerHTML = `Merged calendar URL: <a href="${data.url}" target="_blank">${data.url}</a>`;
+            for (let i = 0; i < calendarIndex; i++) {
-    })
+                const prefix = document.getElementById(`prefix-${i}`).value;
-    .catch((error) => {
+                const url = document.getElementById(`url-${i}`).value;
-        console.error(error);
+                calendarsData.push({ prefix, url });
-        resultDiv.innerHTML = 'Error merging calendars';
+            }
-    });
+            fetch('/merge', {
-});
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ calendars: calendarsData })
+            })
+            .then((response) => response.json())
+            .then((data) => {
+                result.innerHTML = `Merged calendar URL: <a href="${data.url}">${data.url}</a>`;
+            })
+            .catch((error) => {
+                console.error(error);
+                result.innerHTML = 'Error merging calendars';
+            });
+        });