<script> 
<document.addEventListener("DOMContentLoaded", function() {
  
// Array of predefined background colors
var colors = ["#e6f597", "#def598", "#d6f599", "#cef59a", "#c6f59b", "#bef59c", "#b6f59d", "#aef59e", "#a6f59f", "#9ef5a0", "#95f6a1", "#8df6a2", "#85f6a3", "#7df6a4", "#75f6a5", "#6df6a6", "#65f6a7", "#5df6a8", "#55f6a9", "#4df6aa"];

// Get the list items
var listItems = document.querySelectorAll('.scorebar');

// Loop through the first 20 items
for (var i = 0; i < 20; i++) {
  // Get the current list item
  var listItem = listItems[i];
  
  // Get the corresponding color from the array
  var color = colors[i];
  
  // Add a class to the list item with the desired background color
  listItem.style.backgroundColor = color;
}

});

</script>