JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<ul id="list">
	<li data-votes="0">Test<button>Vote</button></li>
  <li data-votes="0">Foo<button>Vote</button></li>
  <li data-votes="0">Bar<button>Vote</button></li>
  <li data-votes="0">Gnarf<button>Vote</button></li>
  <li data-votes="0">Plop<button>Vote</button></li>
  <li data-votes="0">Boink<button>Vote</button></li>
  <li data-votes="0">Puf<button>Vote</button></li>
</ul>

CSS

li {
  position: relative;
  width: 50%;
  
}
li button {
  position: absolute;
  left: calc(100% + 2em);
  top: 0;
  cursor: pointer;
}

li:after {
  content: " " attr(data-votes);
}

JavaScript

document.getElementById("list").addEventListener("click", function(e) {
	// vi reagerer kun hvis det er en button der klikkes på
	if (e.target.nodeName !== "BUTTON") return;
  // inkrementer stemme-tallet for det relevante element
  e.target.parentNode.dataset.votes = parseInt(e.target.parentNode.dataset.votes) + 1;
  // querySelectorAll giver os en NodeList, så vi bruger slice til at konvertere til Array
  let items = Array.prototype.slice.call(this.querySelectorAll("li"));
  // sorter listen efter antal stemmer
  items.sort((a, b) => parseInt(b.dataset.votes) > parseInt(a.dataset.votes) ? 1 : -1);
  // løb den sorterede liste igennem og flyt hvert element til bagerst
  items.forEach(i => this.appendChild(i));
});