How to add and remove elements dynamically JavaScript

Question

I have this let's say quiz maker where I create questions. It looks like this:

The user can choose to display this rating system in 4 different ways:

1. 1 2 3 4 5 -> 1-5 rating
2. 1 2 3 4 5 6 7 8 9 10 -> 1-10 rating
3. ⭐ ⭐ ⭐ ⭐ ⭐ -> 1-5 stars
4. ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ ⭐ -> 1-10 stars

The default rating system is from 1 to 5 numbers. But the user has the option to make it from 1 to 10 using the toggle switch as well as stars instead of numbers. My problem is that I don't know how to add 5 more numbers when the switch is turned on and then when it turned off remove them again, or remove the numbers and add stars when the other toggle switch is turned on.

I imagine that I need something like:

depending on the current state:
if (1-10_switch.isChanged){
   (addMore(stars || numbers) || remove ) 
}
else if (stars_switch.isChanged){
   (changeIconTo(stars || numbers)) 
}

I have the code to check if the switch goes on and off:

oneToTenButtonCheckbox.addEventListener("change", function () {
    OneToTen = OneToTen ? false : true;
});

starsButtonCheckbox.addEventListener("change", function () {
    isStars = isStars ? false : true;
});

And this is the code where I add the numbers:

  var numbersDiv = document.createElement("div");  
  numbersDiv.className = "row";
  for (let i = 0; i < 5; i++) {
    var num = document.createElement("div");
    num.insertAdjacentText("beforeend", i + 1);
    if (i == 0) num.className = "col-1 offset-1 mb-2";
    else num.className = "col-1 mb-2";
    numbersDiv.appendChild(num);
  }

Does anyone know what approach I can use to solve this? Or maybe someone has done it and know how to do? Thanks.

Answer 1

I would not generate that HTML dynamically. Create it upfront, and hide the last 5 elements with a CSS class. The numbers can be generated with a CSS counter at the start as well.

With this set up the code only needs to toggle CSS classes:

const answer = document.querySelector("#answer");
document.querySelector("#oneToTenButtonCheckbox").addEventListener("change", () => {
    answer.children[1].classList.toggle("hidden");
});
document.querySelector("#starsButtonCheckbox").addEventListener("change", () => {
    answer.classList.toggle("stars");
});

body {
    counter-reset: star-num;
}
#answer.stars > span > span::after {
    content: "⭐";
}
#answer > span > span::after {
    counter-increment: star-num;
    content: counter(star-num);
}
#answer > span > span {
    display: inline-block;
    text-align: center;
    width: 30px;
}
.hidden {
    display: none
}

<label><input type=checkbox id="oneToTenButtonCheckbox">1 - 10</label><br>
<label><input type=checkbox id="starsButtonCheckbox">Stars</label><br>
 
<div id="answer">
    <span><span></span><span></span><span></span><span></span><span></span></span><span class="hidden"><span></span><span></span><span></span><span></span><span></span></span>
</div>