Reorder html elements by data attribute using JS

reorder-html-by-data-attribute.php

<script>
  /* 
  *   This simple script will take multiple html elements, like a group of <li> or <span> or anything,
  *   and reorder them by the data attribute.
  *   Example:
  *   The script will reorder this:
  *   <span data-test="1">Number 1</span>
  *   <span data-test="4">Number 2</span>
  *   <span data-test="3">Number 3</span>
  *   <span data-test="2">Number 4</span>
  *
  *   into this:
  *   <span data-test="1">Number 1</span>
  *   <span data-test="2">Number 4</span>
  *   <span data-test="3">Number 3</span>
  *   <span data-test="4">Number 2</span>
  *
  *   add the target withing the querySelectorAll('CSS SELECTOR GOES HERE')
  */
  
  Array.prototype.slice.call(document.querySelectorAll('.column-1 span[data-test]')).sort(function(a, b) {
  
  // Add the data attribute in both of these as well
  
  a = a.getAttribute('data-authorOrder');
  b = b.getAttribute('data-authorOrder');
  return a.localeCompare(b);
}).forEach(function(a) {
  a.parentNode.appendChild(a);
});
  
</script>