Function in addEventLister is not called (JavaScript + w2ui)

I have a JavaScript frontend where I use w2ui elements.
I have a nested layout as follows.

  let layout = new w2layout(outerConfig.layout);
  let grid = new w2grid(outerConfig.grid);
  let formLayout = new w2layout(innerConfig.layout);
  let form = new w2form(innerConfig.form);

  layout.render('#ownskillsdiv');
  layout.html('left', grid);
  layout.html('main', formLayout);
  formLayout.html('main', form);
  formLayout.html('bottom', '<div id="ownskillsbuttoncontainer" style="width: 100%;"></div>');

In the bottom part I dynamically add and remove buttons depending on which row is selected in the grid. Example code for adding a button:

  let ownSkillsButtonDiv = document.getElementById("ownskillsbuttondiv");

  while(ownSkillsButtonDiv.childNodes[0] ) {
    ownSkillsButtonDiv.removeChild(ownSkillsButtonDiv.childNodes[0]);
  }
  
  let btn = document.createElement('button');
  ownSkillsButtonDiv.append(btn);
  btn.id = "ownskillformsave";
  btn.innerText = "Save";
  btn.className = "w2ui-btn";
  btn.addEventListener("click", function() {
    console.log("Save");
  });  

Adding and removing buttons works fine. If I call document.getElementById() after the code block above, I get the button, so it is part of the DOM.

The issue is that the addEventListener callback function is not called (i.e. nothing is printed)

What could be wrong? Who can I fix it?

Thank you