breed usage no longer has any duplicates

static/js/updateBreedingUsage.js

@@ -1,32 +1,39 @@
 function updateBreedingUsage() {
-    // Get the selected monster from the dropdown
-    var selectedMonster = document.getElementById("monsterDropdown").value;
+  // Get the selected monster from the dropdown
+  var selectedMonster = document.getElementById("monsterDropdown").value;
 
-    // Fetch data from the API
-    fetch(`/api/breeding/usage/${selectedMonster}`)
+  // Fetch data from the API
+  fetch(`/api/breeding/usage/${selectedMonster}`)
       .then(response => response.json())
       .then(data => {
-        // Update the HTML with the list of offspring monsters
-        renderOffspringList(data.used_in);
+          // Update the HTML with the list of offspring monsters
+          renderOffspringList(data.used_in);
       })
       .catch(error => console.error('Error fetching data:', error));
-  }
+}
 
-  function renderOffspringList(usageData) {
-    var offspringContainer = document.getElementById("offspringContainer");
+function renderOffspringList(usageData) {
+  var offspringContainer = document.getElementById("offspringContainer");
 
-    // Clear previous HTML content
-    offspringContainer.innerHTML = "<h2 class='text-xl font-bold'>Used to Breed: </h2><ul class='list-disc'>";
+  // Clear previous HTML content
+  offspringContainer.innerHTML = "<h2 class='text-xl font-bold'>Used to Breed: </h2><ul class='list-disc'>";
 
-    // Create and append HTML for each offspring
-    usageData.forEach(item => {
+  // Create a Set to store unique offspring monsters
+  var uniqueOffspringSet = new Set();
+
+  // Add unique offspring to the Set
+  usageData.forEach(item => {
+      uniqueOffspringSet.add(item.offspring);
+  });
+
+  // Create and append HTML for each unique offspring
+  uniqueOffspringSet.forEach(offspring => {
       var offspringHTML = `<li class='font-bold marker:text-slate-400 text-purple-300'>
-                            ${item.offspring}   
-                            </li>
-                            `;
+                          ${offspring}   
+                          </li>`;
       offspringContainer.innerHTML += offspringHTML;
-    });
+  });
 
-    // Close the unordered list
-    offspringContainer.innerHTML += "</ul>";
-}
+  // Close the unordered list
+  offspringContainer.innerHTML += "</ul>";
+}