Why doesn't the event listener gets removed immediately after the function gets executed?

What I'm expecting is when I click on button 4 the event listener should immediately gets removed from button 1, but what actually happens is that the event listener stops only after clicking button 1 one time.

var btn = document.querySelector('.container').children;    for (let x = 0; x < btn.length; x++) {      btn[x].addEventListener('click', changeFontSize);      function changeFontSize() {      // changing the font sizes from 16 to 20 , or the opposite.      if (getComputedStyle(btn[x]).fontSize == '16px') {        btn[x].style.fontSize = '20px';      } else {        btn[x].style.fontSize = '16px';      }        // nesting a function to remove the event listener form btn0 after btn4 gets clicked on      if (getComputedStyle(btn[3]).fontSize == '20px') {        btn[0].removeEventListener('click', changeFontSize);      }    }  }

button {    font-size: 1em;  }

<div class="container">    <button id='btn'>btn 1</button>    <button id='btn'>btn 2</button>    <button id='btn'>btn 3</button>    <button id='btn'>btn 4</button>    <button id='btn'>btn 1</button>  </div>

https://stackoverflow.com/questions/66728712/why-doesnt-the-event-listener-gets-removed-immediately-after-the-function-gets March 21, 2021 at 11:59AM