let myvariable = document.querySelectorAll('.my-button');
    
    myvariable.addEventListener('click', function (e) {
      var button = e.target;
      
      if (button.getAttribute('data-reset') === 'true') {
        // Reset the filters
        var filter = button.getAttribute('data-filter');
        resetFilter(filter);
      } else {
        // Filter the tag
        var filter = button.getAttribute('data-filter');
        var tag    = button.getAttribute('data-filter-tag');
        filterTag(filter, tag);
      }
    });

This is what I have.

I have multiple my-buttons, like so:

    <button class="my-button"></button> <-- works
    <button class="my-button"></button> <-- does not work
    <button class="my-button"></button> <-- does not work

And I want all of them to be targeted for the addEventListener. The problem? Only the first button works, the rest does not seem to work.

What am I doing wrong?

Note, I also tried getElementsByClassName. but that also failed...