I'm just in the process of learning how JavaScript classes work and I'm just looking for some advice on how to achieve something quite simple I hope regarding animating some elements. 

I have created a class named `myAnimation`, the constructor takes in 1 argument which is an element. All its doing is fading a heading out and in, all very simple. It works fine when there is just one heading element on the page, I'm just not to sure how I go about getting it to work with more than one heading.

Please excuse my naivety with this; it's all very new to me, this is just a basic example I have managed to make myself to try and help myself understand how it works.

```js
class myAnimation {
  constructor(element) {
    this.element = document.querySelector(element);
  }
  fadeOut(time) {
    if (this.element.classList.contains('fadeout-active')) {
      this.element.style.opacity = 1;
      this.element.classList.remove('fadeout-active');
      button.textContent = 'Hide Heading';
    } else {
      this.element.style.opacity = 0;
      this.element.style.transition = `all ${time}s ease`;
      this.element.classList.add('fadeout-active');
      button.textContent = 'Show Heading';
    }
  }
}

const heading = new myAnimation('.heading');
const button = document.querySelector('.button');
button.addEventListener('click', () => {
  heading.fadeOut(1);

});
```

```html
<div class="intro">
  <h1 class="heading">Intro Heading</h1>
  <p>This is the intro section</p>
  <button class="button">Hide Heading</button>
</div>

<div class="main">
  <h1 class="heading">Main Heading</h1>
  <p>This is the main section</p>
  <button class="button">Hide Heading</button>
</div>
```