Call a class function from a async class function

I want to call a function inside a class from another function inside the same class. This works well with this.myFunction(). But when the calling function is for example triggered by a click eventhandler, this for the class is no longer available.

Normally I would use new MyClass().myFunction()but in this case I am losing values and objects from "the first" instance.

In my case I started an interval, that i want to clear after a button click. But when I create a new instance of my class, the interval is of course not longer available.

How should I call functionToCall() from the myButton.addEventListener("click", function () {? Or is this a generally wrong approach?

MyClass.js

export class MyClass {

constructor() {
 this.refreshIntervalId = 0;
}

functionToCall() {

 clearInterval(this.refreshIntervalId); // this has to be the instance

}

buttonFunction() {

 let myButton = document.getElementById(myButton);

 myButton.addEventListener("click", function () {
  this.functionToCall(); // doesn't work (of course)
 });

}

startInterval() {
 this.refreshIntervalId = setInterval(() => {
   this.buttonFunction()
 }, 1000);
}

}

index.js

import {
  MyClass
} from './MyClass';

let myClass = new MyClass();
myClass.startInterval();

// listener
    let myButton = document.getElementsByClassName('myButton');
    for (var i = 0; i < myButton.length; ++i) {
      let customVar; // this gets bind with value i
      myButton[i].addEventListener("click", (function () {
        let value = myButton[numbr].getAttribute("data-value");
        this. functionToCall(value);
     }).bind(this,customVar = i));

myButton.addEventListener("click", function () {
   this.functionToCall(); // doesn't work (of course)
});

myButton.addEventListener("click", () => {
   this.functionToCall();
});

myButton.addEventListener("click", (function () {
   this.functionToCall();
}).bind(this));