fix: Multi skill add works now

src/main/resources/static/js/skills/skillSelector.js

@@ -113,16 +113,6 @@ function addSkillSelector() {
   // Delete the existing options and set it to the default value
   rebuildOptions();
 
-  // Update the visibility of the "Entfernen" buttons
-  updateRemoveButtonsVisibility();
-
-  // Append the new skill selector to the container
-  const container = document.querySelector(".skill-selectors");
-  container.appendChild(newSkillSelector);
-
-  // Initialize star rating components for the new skill selector
-  initializeStarRatingComponents();
-
   // Add event listener to the new "Entfernen" button
   newSkillSelector
     .querySelector(".btn-default")
@@ -130,6 +120,15 @@ function addSkillSelector() {
       event.preventDefault();
       handleRemoveSkillButtonClick(this);
     });
+
+  // Append the new skill selector to the container
+  skillSelectorList.appendChild(newSkillSelector);
+
+  // Initialize star rating components for the new skill selector
+  initializeStarRatingComponents();
+
+  // Update the visibility of the "Entfernen" buttons
+  updateRemoveButtonsVisibility();
 }
 
 //====================================================================================
@@ -140,17 +139,13 @@ function updateRemoveButtonsVisibility() {
   const skillSelectors = document.querySelectorAll(".skill-selector");
   const removeButtons = document.querySelectorAll(".btn-default");
 
-  // Show "Entfernen" buttons only if there are at least two skill selectors
   if (skillSelectors.length > 1) {
     removeButtons.forEach((button) => {
       const selectElement = button
         .closest(".skill-selector")
-        .querySelector("#secondarySkill");
-      if (selectElement.value) {
-        button.style.display = "inline-block";
-      } else {
-        button.style.display = "none";
-      }
+        ?.querySelector("#secondarySkill");
+      button.style.display =
+        selectElement && selectElement.value ? "inline-block" : "none";
     });
   } else {
     removeButtons.forEach((button) => {
@@ -169,7 +164,13 @@ function handleRemoveSkillButtonClick(button) {
   skillSelector.remove();
 
   // If there is no slector with an empty value left we need to add one
-  addSkillSelector();
+  if (
+    document.querySelectorAll("#secondarySkill option[value='']").length === 0
+  ) {
+    addSkillSelector();
+  } else {
+    rebuildOptions();
+  }
 }
 
 //====================================================================================