Event listener, classes and garbage collection

I just wanted to clear something up in my own head.

I have a Class with methods generating html. I also have a method generating an eventlistener.

I find the event listener only works once (when the button is pushed in this instance). I checked the developer tools and the event listener is removed.

it only stays and works more than once when I make the eventlistener callback recursive so the eventlistener is reapplied every callback.... like below

calculate(){ //class method
      let button_html = document.getElementById("calculateBut");// probably quite leaky finding this twice
      button_html.addEventListener("click", this.calculate.bind(this));// recursive binding of event listener and callback. need this because i think whats happening is the callback is being removed by garbage collection after the render_content() method is finished
}

//called in another part of the class
let button_html = document.getElementById("calculateBut"); //getting the calculate button after its creation
button_html.addEventListener("click", this.calculate.bind(this)); // binding call back function to scope of the class. not the callback function internal scope
      

I am fairly sure it either because of the global execution context being deleted off the call stack or something around garbage collection but please if im missing something please let me know

also if you think be should be doing thing differently, please let me know.

thanks is advance!