manual even trigger using Sortable

Question

Trying to do some data sorting using Sortable.js (https://sortablejs.github.io/Sortable/). This seems to be working for me. I have a use case where I will let customer click on the icon to move the item to the top of the list. I have written the code and this seems to be working except few items

const list = Sortable.create(demo, {
  onStart: function (evt) {
    //
  },
  onEnd: function (evt) {
    console.log(list.toArray());
      updatePositionNumbers(gridDemo);
  },
  onSort: function (/**Event*/evt) {
    console.log(list.toArray());
  },
  onUpdate: function (evt) {
    console.log(list.toArray());
    updatePositionNumbers(gridDemo);
  }
});


const movetop = document.querySelectorAll('.to-top');
movetop.forEach(icon => {
  icon.addEventListener('click', function() {
    const item = this.closest('.showcase'); 
    demo.insertBefore(item, demo.firstChild); 
    updatePositionNumbers(demo); 
  });

});

function updatePositionNumbers(grid) {
  const showcaseActions = grid.querySelectorAll('.item');
  showcaseActions.forEach((button, index) => {
    button.innerText = (index + 1).toString();
  });
}

Items are being moved to the top, however non of the even is triggered when I use moveToTopIcons.forEach to move item to the top of the list. Is there a way I can force the even as I need to call some other system after the even and need to persist the new sorted list. With this, as soon as I refresh the page, the new sorted items are fully removed and revert to the old state.