Don’t understand why it only put the first int into array in javaScript

I am want to use a progress bar using Js. So I refer to the online demo. It made by Cassidy Williams on September 13, 2018. Link:

When I add more step into steps div elements. Like:

  <div class="steps">
    <div class="step" id="0"></div>
    <div class="step" id="1"></div>
    <div class="step" id="2"></div>
    <div class="step" id="3"></div>
    <div class="step" id="4"></div>
    <div class="step" id="5"></div>
    <div class="step" id="6"></div>
    <div class="step" id="7"></div>
    <div class="step" id="8"></div>
    <div class="step" id="9"></div>
    <div class="step" id="10"></div>

When I click the third step. The last step status is clicked. Thus, what is the problem with this error? Also, what is the solution to this error?


On line 6 of the JS code, the author have the following:


Replace by:


And on lines, 14, 18 and 21, do the same.

steps.forEach((e) => {
    if ( === stepNum) { // <-- here
    if ( < stepNum) { // <-- here
    if ( > stepNum) { // <-- and here
      e.classList.remove('selected', 'completed');

The HTML id is a string, so a cast is necessary. The conditions misbehave because a string comparison is used instead of a number comparison. By casting the string to a number, it is working as intended.

Source: stackoverflow