Arrow function doesn't trigger inside a HTML

I've been working on a to do list for my web dev studies with The Odin Project. My assignment is to create a to-do app and I chose the composite design pattern to do after a lot of struggle with my previous messy code. So far so good but one of my button oddly doesn't trigger the arrow function I prepared for it. I said oddly cause I've got a very similar approach for another button the works perfectly. The only difference I feel it's causing this issue is an assignment to a button for the let's call it root of this tree structure (session.js class). document.getElementById effectively finds the specific button in the document and the addEventListener trigger a alert for example if there's no arrow function involved. Can anyone lend me a hand with this please?

The problem is in the addEventListener inside the if statement inside the addChild function of the following class

import Component from './component.js';

export default class Container extends Component{
  child;
  constructor(){
    super();
  }
  addChild(id, parentId){
    alert(id);
    alert(parentId);
    document.getElementById(parentId).appendChild(document.createElement('div')); 
    document.getElementById(parentId).lastChild.id = id;
    document.getElementById(parentId).lastChild.innerHTML = this.child.innerHTML;
    document.getElementById(parentId).lastChild.className = this.child.className;

    if(document.getElementById(id).className!='check-list'){
      document.getElementById(id).innerHTML+="<button id='"+id+"-add-button'></button>";
      document.getElementById(id+'-add-button').addEventListener('click', ()=>{
       this.child.addChild(this.parentNode.id);
      });
    }

    document.getElementById(id).innerHTML+="<button id='"+id+"-remove-button'></button>";

    document.getElementById(id+'-remove-button').addEventListener('click', ()=>{
    document.getElementById(id).parentNode.removeChild(document.getElementById(id)); 
    });    

    let inputs = document.getElementById(parentId).getElementsByClassName('input');
    for(let i=0; i<inputs.length; ++i){ 
     inputs[i].addEventListener('input', ()=>{
       inputs[i].dataset.storage = inputs[i].value;});
    }
  }
}

Container class inherits from Component class

export default class Component{
    className;
    innerHTML; 
  constructor(){
  }
}

And Session class is the only class that, if I can call it override in this case the same event

import Project from "./project.js";
import Container from "./container.js";

export default class Session extends Container{
  constructor(username){
    super();
    this.username = username;
    this.child = new Project();
    this.innerHTML = ["<div id='"+this.username+"-session' class='session' data-checklist='' data-card='' data-list='' data-project''>",
                "<H1>Call it a day!</H1>",
                "<button id='session-add-button'>Add Project</button>",
                "<button id='logout'>Log out</button>",
                "</div>"].join("");  
    document.body.innerHTML = this.innerHTML;
    document.getElementById('session-add-button').addEventListener('click', ()=>{
      this.addChild(this.username+"-session");
    })
  }

  addChild(parentId){
    super.addChild(Project.getId(), parentId);
    ++Project.count;
  }
}

I've checked already if the button inside that if in the container.js script is found as well as declare a function without the arrow function. I've also tried to find the difference between this add button that has issues with the remove button and I can't see anything that I'm doing wrong in terms of typing or syntax.