Rails 6.1 引导 CSS 在 JS 事件处理后不正确

问：

我找不到问题出在哪里，我正在将 Rails 6.1 与 webpacker 一起使用，并且所有依赖项似乎都运行正常。测试

我有一个带有引导样式的表格，我想使用香草 JS 按标题对这个表格进行排序，但排序后我的表格会发生什么：

排序前的表格

排序后的表格

这就是我笨拙的 JS 脚本的样子：

document.addEventListener('turbolinks:load', function() {
  let control = document.querySelector('.sort-by-title')

  if (control) control.addEventListener('click', sortRowsByTitle)
})

function sortRowsByTitle () {
  let table = document.querySelector('table')

// Choose all rows, create Array out of it and delete header row
  let rows = table.querySelectorAll('tr')
  let sortedRows = Array.from(rows)
  sortedRows.shift()

// In this IF clause the way of sorting is chosen by checking the class of HTML element
  if (this.querySelector('.octicon-arrow-up').classList.contains('hide')) {
    sortedRows.sort(compareRowsAsc)
    this.querySelector('.octicon-arrow-up').classList.remove('hide')
    this.querySelector('.octicon-arrow-down').classList.add('hide')
  } else {
    sortedRows.sort(compareRowsDesc)
    this.querySelector('.octicon-arrow-up').classList.add('hide')
    this.querySelector('.octicon-arrow-down').classList.remove('hide')
  }

// Here is created new table, needed classes are added to it, 
// and afterwards sorted rows are appended to it
  let sortedTable = document.createElement('table')
  sortedTable.classList.add('table', 'table-light', 'table-hover', 'table-bordered', 'mt-2')


  sortedTable.appendChild(rows[0])

  for (let i = 0; i < sortedRows.length; i++) {
    sortedTable.appendChild(sortedRows[i])
  }

// Finally, old table replaced by sorted one in DOM
 
  table.parentNode.replaceChild(sortedTable, table)
}

所以我排序后的 DOM 看起来完全一样，所有的类，CSS 检查器在那里都有所有相同的属性。

排序前的 DOM 和 CSS

排序后的 DOM 和 CSS