Javascript in NPS question conflicting with CSS coloring rules

I need a NPS question options to color when hovering and selecting.

The following code works fine, except for the selecting part. When I select the option, it doesn't keep the hovering color but reverts to the default gray.

/* Color the question*/
#QID10 td.LabelContainer:nth-child(1) label.q-checked, 
#QID10 td.LabelContainer:nth-child(1) label:hover {
  background-color: #E73F12 !important;
  color: #ffffff;
}

#QID10 td.LabelContainer:nth-child(2) label.q-checked,
#QID10 td.LabelContainer:nth-child(2) label:hover {
  background-color: #EE5C1C !important;
  color: #ffffff;
}

#QID10 td.LabelContainer:nth-child(3) label.q-checked,
#QID10 td.LabelContainer:nth-child(3) label:hover {
  background-color: #EF8200 !important;
  color: #ffffff;
}

etc...

The strange thing is, the CSS code for coloring the options worked fine until I added some JS to the question to reverse the options:

Qualtrics.SurveyEngine.addOnload(function()
{
	/*Voer uw JavaScript hier uit bij het laden van de pagina*/

});

Qualtrics.SurveyEngine.addOnReady(function() {
  // Get the NPS question element
  var npsQuestion = document.getElementById('QID10');

  // Get the label container elements
  var labelContainers = npsQuestion.querySelectorAll('td.LabelContainer');

  // Get the total number of label containers
  var totalContainers = labelContainers.length;

  // Loop through the label containers and reverse their order
  for (var i = 0; i < totalContainers / 2; i++) {
    var temp = labelContainers[i].innerHTML;
    labelContainers[i].innerHTML = labelContainers[totalContainers - 1 - i].innerHTML;
    labelContainers[totalContainers - 1 - i].innerHTML = temp;
  }
});


Qualtrics.SurveyEngine.addOnUnload(function()
{
	/*Voer uw JavaScript hier uit wanneer de pagina nog niet geladen is*/

});

Why this conflict? How do I solve it?