JSFiddle - React, Tailwind, and code Playground

HTML

<div class="priority">
    <input type="radio" name="1" id="r1" value="a rating">
    <input type="radio" name="1" id="r2" value="b rating">
    <input type="radio" name="1" id="r3" value="c rating">
    <input type="radio" name="1" id="r4" value="d rating">
    <input type="radio" name="1" id="r5" value="e rating">
</div>
        <div class="circ"></div>
        <div class="circ"></div>
        <div class="circ"></div>
        <div class="circ"></div>
        <div class="circ"></div>
<div class="indicator">Value appears here</div>

CSS

.priority input{
    position: relative;
    z-index: 9;
    opacity: 0;
}
.circ{
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: gray;
    display: inline-block;
    position: relative;
    bottom: 20px;
    margin-left: 5px;
    margin-right: 4px;
}

JavaScript

$(function () {
    $(".priority input").on("click", function () {
      var id = this.id;
        if(id=='r1'){
            $(".circ").css("background-color","red");
            $(".circ").slice(-4).css("background-color","gray");
        }
        if(id=='r2'){
            $(".circ").css("background-color","yellow");
            $(".circ").slice(-3).css("background-color","gray");
        }
        if(id=='r3'){
            $(".circ").css("background-color","blue");
            $(".circ").slice(-2).css("background-color","gray");
        }
        if(id=='r4'){
            $(".circ").css("background-color","pink");
            $(".circ").slice(-1).css("background-color","gray");
        }
        if(id=='r5'){
            $(".circ").css("background-color","green");
        }
   var htmlStr = $(this).attr("value");
   $(".indicator").html(htmlStr); 
    });
})