JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rating">
    <label for="rate_1" class="glyphicon glyphicon-star">
        <input type="radio" id="rate_1" name="rating" value="1">
    </label>
    <label for="rate_2" class="glyphicon glyphicon-star">
        <input type="radio" id="rate_2" name="rating" value="2">
    </label>
    <label for="rate_3" class="glyphicon glyphicon-star">
        <input type="radio" id="rate_3" name="rating" value="3">
    </label>
    <label for="rate_4" class="glyphicon glyphicon-star">
        <input type="radio" id="rate_4" name="rating" value="4">
    </label>
    <label for="rate_5" class="glyphicon glyphicon-star">
        <input type="radio" id="rate_5" name="rating" value="5">
    </label>
</div>
<ul class="validation">
    <li class="success-hover">
        <label for="id_validation_1">
            <input class="success" type="radio" id="id_validation_1" name="validation"><i class="fa fa-check"></i>Validated</label>
    </li>
    <li class="danger-hover">
        <label for="id_validation_2">
            <input class="danger" type="radio" id="id_validation_2" name="validation"><i class="fa fa-close"></i>Rejected</label>
    </li>
    <li class="info-hover">
        <label for="id_validation_3">
            <input type="radio" id="id_validation_3" name="validation"><i class="fa fa-spinner"></i>Partially completed</label>
    </li>
    <li class="warning-hover">
        <label for="id_validation_4">
            <input type="radio" id="id_validation_4" name="validation"><i class="fa fa-clock-o"></i>Expired</label>
    </li>
</ul>

JavaScript

$(function () {
    $("input[name=rating]").change(function () {
        if ($("input[name=rating][value=4]").is(":checked") || $("input[name=rating][value=5]").is(":checked")) {
            $('.success').prop('checked', true);
        } else $('.success').prop('checked', false);
    })
})