How to make this JS work for all elements, rather than the first one?

I have the following code, which, when paired with right CSS, allows you to drag and scroll on an element, even on desktop.

The querySelector works based on the ID containing tb-drag-scroll-

I have multiple elements on the same page with IDs that match this… e.g.

<div id="tb-drag-scroll-1"></div>
<div id="tb-drag-scroll-2"></div>

However, the JS only works for the first div. I understand why (kind of) but I’m struggling to re-write the code so that it works for every element with a matching ID. Can anyone help?

const dragScroll = document.querySelector('[id^="tb-drag-scroll-"]')
let isDown = false
let startX
let scrollLeft

dragScroll.addEventListener("mousedown", (e) => {
  isDown = true
  dragScroll.classList.add("active")
  startX = e.pageX - dragScroll.offsetLeft
  scrollLeft = dragScroll.scrollLeft
})
dragScroll.addEventListener("mouseleave", () => {
  isDown = false
  dragScroll.classList.remove("active")
})
dragScroll.addEventListener("mouseup", () => {
  isDown = false
  dragScroll.classList.remove("active")
})
dragScroll.addEventListener("mousemove", (e) => {
  if (!isDown) return
  e.preventDefault()
  const x = e.pageX - dragScroll.offsetLeft
  const walk = x - startX
  dragScroll.scrollLeft = scrollLeft - walk
  console.log(walk)
})

I tried to re-write based on this scope but couldn’t get it to work.

>Solution :

Use querySelectorAll since you want to affect all of your divs with that id and then iterate thru them. Since querySelectorAll returns an array like object, you want to access each element by its index

const dragScroll = document.querySelectorAll('[id^="tb-drag-scroll-"]')
let isDown = false
let startX
let scrollLeft

for (let i = 0; i < dragScroll.length; i++) {
    dragScroll[i].addEventListener("mousedown", (e) => {
    isDown = true
    dragScroll[i].classList.add("active")
    startX = e.pageX - dragScroll[i].offsetLeft
    scrollLeft = dragScroll[i].scrollLeft
  })
  dragScroll[i].addEventListener("mouseleave", () => {
    isDown = false
    dragScroll[i].classList.remove("active")
  })
  dragScroll[i].addEventListener("mouseup", () => {
      isDown = false
      dragScroll[i].classList.remove("active")
  })
dragScroll[i].addEventListener("mousemove", (e) => {
  if (!isDown) return
    e.preventDefault()
    const x = e.pageX - dragScroll[i].offsetLeft
    const walk = x - startX
    dragScroll[i].scrollLeft = scrollLeft - walk
    console.log(walk)
    })   
}

<div id="tb-drag-scroll-1">div1</div>
<div id="tb-drag-scroll-2">div2</div>