Giving Multiple Buttons an EventListener

I'm making a website that includes carousels and buttons. When you click the buttons it moves the carousel to the left or right to see more or previous content. I made it at first by creating two functions, one for the button that goes back and one for the button that goes forward. It worked, but I realized that I needed to make it for All of the buttons since I had multiple carousels.

var nextButton = document.querySelectorAll('.button-forward');
var backButton = document.querySelectorAll('.button-back');

nextButton.addEventListener('click', function() {
itemContainer.style.transform = 'translateX(-40%)';
});


backButton.addEventListener('click', function() {
itemContainer.style.transform = 'translateX(10%)';
});

I tried storing all the forward and backward buttons with document.querySelectorAll and gave them a forEach method where in it is the event listener for them. The other two carousel buttons still weren't working, I also tried making them an array to see if it would help, but it didn't change anything. In summary I want to make it where I can give the event listener to all of the pairs of buttons instead of just one. Could you guys help me? If you need a better description please tell me!

var nextButton = document.querySelectorAll('.button-forward');
var backButton = document.querySelectorAll('.button-back');


nextButton.forEach(button => {
  button.addEventListener('click', nextButton => {
    itemContainer.style.transform = 'translateX(-40%)';
  })
})

backButton.forEach(button => {
  button.addEventListener('click', backButton => {
    itemContainer.style.transform = 'translateX(10%)';
  })
})

Here's my HTML structure of the carousel for those who want to know: I used the main element keep the parts of my carousel together, inside it is the visible_items div that only shows the items that are in it with overflow: scroll in CSS. Inside of that os the item_container which just contains the items. The ion-icons or buttons are at the top and bottom of the main element, and when you click them they make the item_container translate left or right making the items shown in the visible_items div change.

    <ion-icon name="chevron-back-outline" class="button-back"></ion-icon>
        <main>
            <h1>Poular Shoes</h1>
            <div class="visible_items">
                <div class="item_container">
                    <div class="items">
                    </div>
                    <div class="items">
                    </div>
                    <div class="items">

                    </div>
                    <div class="items">

                    </div>
                    <div class="items">
                    </div>
                    <div class="items">
                    </div>
                    <div class="items">
                    </div>
                    <div class="items">

                    </div>
                </div>
            </div>
            <ion-icon name="chevron-forward-outline" class="button-forward"></ion-icon>
        </main>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/FTH1t2w