For each element inside an array I want it to have another for each that will have unique action

I wanted to make each element inside myArray will have it’s unique action, but I end up with only one of them working.
I have tried one more way of doing it that worked, but it was a complete boilerplate and I’m looking for a better solution than that.
More details:
For each element (Another array of buttons) inside myArray it will have unique action like scrollIntoView of some element in HTML.

In HTML I have 4 divs that share the same class and it looks like that:

<div class='firstDiv'>
<button class="teamBtn"></button>
<button class="serviceBtn"></button>
etc..
</div>
<div class='secondDiv'>
<button class="teamBtn"></button>
<button class="serviceBtn"></button>
etc..
</div>

let aboutSection = document.querySelector('.about')
let serviceSection = document.querySelector('.services')
let teamSection = document.querySelector('.team')
let homeBtn = document.querySelectorAll('.homeBtn');
let aboutBtn = document.querySelectorAll('.aboutBtn');
let serviceBtn = document.querySelectorAll('.serviceBtn')
let teamBtn = document.querySelectorAll('.teamBtn')

let myArray = [];

myArray[0] = homeBtn;
myArray[1] = aboutBtn;
myArray[2] = serviceBtn;
myArray[3] = teamBtn;

myArray.forEach(el => {
  addEventListener('click', () => {
    teamBtn.forEach(() => {
     teamSection.scrollIntoView();
    });
    serviceBtn.forEach(() => {
      serviceSection.scrollIntoView();
    });

  })
})