I wrote this piece of code to make the product container scroll left and right but I tried everything it is just not working

Question

The main errors are there is an unexpected identifier in line 16 of the JS where preBtn[i] line starts

Here is the JS file:

const productContainers = [...document.querySelectorAll('.product-container')];
const nxtBtn = [...document.querySelectorAll('.nxt-btn')];
const preBtn = [...document.querySelectorAll('.pre-btn')];


productContainers.forEach((item, i) => {
  let containerDimenstions = item.getBoundingClientRect();
  let containerWidth = containerDimenstions.width;



    nxtBtn?[i].addEventListener("click", () => {
      item.scrollLeft += containerWidth;
    })

    preBtn[i].addEventListener("click", () => {
      item.scrollRight -= containerWidth;
    })
})

here is the HTML and how I linked the external JS file:

<script type="text/javascript" src="home.js" defer="defer"></script>