How to get id of pug mixin into a javascript function with inline onclick

I am trying to make a mixin where multiple counters can be added with different element ids. I have tried a number of things and the closest working example I got is this.

mixin counter(count, id)
  h2(id=id)= count
  button(onclick="addId(1, this.textContent)")= id
  button(onclick ="addId(-1, this.textContent)")= id
  script.
    function addId(x,y){
      let element = document.getElementById(y);
      let content = element.textContent;
      element.textContent = Number(content) + x;
    }

Then I add the mixins using

+counter(0, 'idToAdd')

This works but the issue is the buttons values have to be the id value passed in. I want the one button to be Add and the other Subtract. But everything I have tried has failed. Only by using

this.textContent 

on the button am I able to pass the id in and then it works. So what I want to do is pass the id of the display element into the inline onclick without using this.textContent so I can name the buttons appropriately.

I have tried

#{id}

and

!{id}

and even

`${id}`

But nothing seems to work.

Please help.

Thank you

Read more here: https://stackoverflow.com/questions/66257654/how-to-get-id-of-pug-mixin-into-a-javascript-function-with-inline-onclick