title: Having trouble understanding why the class is being replaced on different index
body: <p>I have a question from w3school filter example.</p>
  <p>This is the code.
  <code>current[0].className = current[0].className.replace(' active, &quot;&quot;);</code></p>
  <p>I understand the active class is being replaced by empty string.
  But what I don't understand is this is for index 0 and only that will be replaced. How come when the other buttons are clicked, the active class changed to empty string? When you click index 1, it now has active class to it and that's fine since <code>this.className += &quot; active&quot;</code> will add the active to whichever button is clicked.</p>
  <p>Now you click index 2, how come index 1 is replaced with empty string or why active disappear and move to index 2? Isn't <code>current[0].className</code> fixed to only index 0? If somebody can explain this to me, that would be great.</p>
  <p>Link <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_elements" rel="nofollow noreferrer">https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_elements</a></p>