buttons are like one, when i click either button they both do the same thing

Question

why isn't it not working when I press the previous button, it's like both the previous and next button are the same

here's the code: https://codepen.io/pinkypink/pen/NWjzMre

const images = document.querySelector('.carousel_images');
const buttons = document.querySelectorAll('.carousel_button');

const imageCount = document.querySelectorAll('.carousel_images img').length;
let imageIndex = 1;
let translateX = 0;

buttons.forEach(button => {
  button.addEventListener('click', e => {
    if (e.target.id === 'next') {
      if (imageIndex !== 1) {
        imageIndex--;
        translateX += 650;
      }
    } else {
      if (imageIndex !== imageCount) {
        imageIndex++;
        translateX -= 683;
      }
    }
    
    images.style.transform = `translateX(${translateX}px)`;
  });
});

Answer 1

Use e.currentTarget not e.target.

e.target is the element that was clicked - in your case the SVG element.

e.currentTarget is the element whose event listener is being called - in your case the div.