a few questions I have. where is buttonClassName defined? typically you would do document.getElementByClassName(‘btn’) where ‘btn’ is the actual class name but this is better to use getElementById instead so you don’t have an issue of retrieving the wrong button because if theirs several items with the same class name it will retrieve whichever one it finds first which is also why you might be getting some inconsistency.
if you did querySelector, this is best used to just retrive an element such as ‘button’
You would be better looking at building a custom widget in JavaScript. You could then hook into the lifecycle events to correctly add and remove your event handlers when the widget is rendered or destroyed.
There is some documentation on how this all works. https://docs.mendix.com/howto7/widget-development/