CODE EXAMPLE FOR HTML

leaderboard html

<div id="container">
  <div class="row">
    <div class="name">Player1</div><div class="score">430</div>
  </div>

  <div class="row">
    <div class="name">Player2</div><div class="score">580</div>
  </div>

  <div class="row">
    <div class="name">Player3</div><div class="score">310</div>
  </div>

  <div class="row">
    <div class="name">Player4</div><div class="score">640</div>
  </div>

  <div class="row">
    <div class="name">Player5</div><div class="score">495</div>
  </div>
</div>
<style>
#container {
  width: 600px;
  height: auto;
}

.row {
  position: relative;
  display: block;
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #AFAFAF;
}

.name {
  position: relative;
  display: inline-block;
  width: 75%;
  line-height: 45px;
}

.score {
  position: relative;
  display: inline-block;
  width: 25%;
}

.row:nth-child(1) {
  background: gold;
}

.row:nth-child(2) {
  background: #c0c0c0;
}

.row:nth-child(3) {
  background: #cd7f32;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
  let elements = []
  let container = document.querySelector('#container')
  // Add each row to the array
  container.querySelectorAll('.row').forEach(el => elements.push(el))
  // Clear the container
  container.innerHTML = ''
  // Sort the array from highest to lowest
  elements.sort((a, b) => b.querySelector('.score').textContent - a.querySelector('.score').textContent)
  // Put the elements back into the container
  elements.forEach(e => container.appendChild(e))
});
</script>