Customize Javascript for ratings section.

What I would like to do is change the background color of this element:

<span class="gd-rating-text" data-title="Select a rating">Select a rating</span>

Dependent on the value of this input:

<input type="hidden" id="geodir_overallrating" name="geodir_overallrating" value="0">

Which is controlled by the hover/active state of the rating stars:

<span class="gd-rating-wrap">
  <span class="gd-rating-foreground" style="width: 0%;">
    <i class="fas fa-star fa-fw" aria-hidden="true" title="Terrible"></i>
    <i class="fas fa-star fa-fw" aria-hidden="true" title="Poor"></i>
    <i class="fas fa-star fa-fw" aria-hidden="true" title="Average"></i>
    <i class="fas fa-star fa-fw" aria-hidden="true" title="Very Good"></i>
    <i class="fas fa-star fa-fw" aria-hidden="true" title="Excellent"></i>				
  </span>
  <span class="gd-rating-background">
    <i class="fas fa-star fa-fw" aria-hidden="true" title="Terrible"></i>
    <i class="fas fa-star fa-fw" aria-hidden="true" title="Poor"></i>
    <i class="fas fa-star fa-fw" aria-hidden="true" title="Average"></i>
    <i class="fas fa-star fa-fw" aria-hidden="true" title="Very Good"></i>
    <i class="fas fa-star fa-fw" aria-hidden="true" title="Excellent"></i>
  </span>
</span>

I found the JS responsible for updating the text in the geodirectory.js file:

// set the current star value and text
$value = jQuery(this).closest('.gd-rating-input').find('input').val();
if($value > 0){
  jQuery(this).closest('.gd-rating-input').find('.gd-rating-foreground').width( $value / $total * 100 + '%');
  jQuery(this).closest('.gd-rating-input').find('.gd-rating-text').text( jQuery(this).closest('.gd-rating-input').find('svg, img'+':eq('+ ($value - 1) +'), i'+':eq('+ ($value - 1) +')').attr("title"));
}

Is there a non-descructive way, contained within my theme, that I can add to this to change the background color as well? Thanks for the help!