Recently I am facing a strange issue while using https://github.com/Shopify/draggable package. So here is the problem, I am using stimulus js in rails app, and in one of the stimulus controllers I have:

export default class extends ApplicationController {
 updateElementPosition(target) {
  let positions = target.querySelectorAll('input[name="position"]');
  positions.forEach(positionInput => {
   const index = this.index(positionInput.closest('[element]'))
   positionInput.value = index
  })
 }
 .... in one function
 registerEvent() {
   sortable.on('drag:stopped', function(event) {
    let oldStep = $(event.sourceContainer).parents('[step]')[0]
    let newStep = $(event.originalSource).parents('[step]')[0]
    if (oldStep == newStep) {
     this.updateElementPosition(newStep)
    } else {
     this.updateElementPosition(oldStep)
     this.updateElementPosition(newStep)
    }
  }.bind(this))
 }
}

So basically I want to update an element position input value whenever an element is dragged to a different position inside a draggable container.

Problem: When I use the debugger in updateElementPosition and execute each line by line then the positionInput value is set properly, but when I run it as it is, then it does not set the positionInput with the index value.