JSFiddle - React, Tailwind, and code Playground

HTML

<div class="productAttributeRow productAttributeConfigurablePickListSet productAttributeRuleCondition" id="a9e1018b0d4a98a6836fdf644eb227a1">
    <div class="productAttributeLabel">
        <label for="4fe3d80e78f0e0dc478e7ee56e98d3ea">
            <span class="required">*</span>
            <span class="name">Cosmetic Condition:</span>
            <i class="fa fa-info-circle conditionHelp helpIcon modalOpener"></i>
        </label>
    </div>
    <div class="productAttributeValue">
        <div class="productOptionViewRectangle conditionOption">
            <ul class="list-horizontal">
                <li class="option">
                    <label for="4a43f295a3273a1b90567090ac3fc9f3">
                        <input type="radio" class="validation" name="attribute[267]" value="1216" id="4a43f295a3273a1b90567090ac3fc9f3">
                            <span class="name">Excellent</span>
                        </input>
                    </label>
                </li>
                <li class="option">
                    <label for="f03ed6c05af7ea80dc1b75d853f43026">
                        <input type="radio" class="validation" name="attribute[267]" value="311" id="f03ed6c05af7ea80dc1b75d853f43026">
                            <span class="name">Good</span>
                        </input>
                    </label>
                </li>
                <li class="option   selected selectedValue">
                    <label for="1598c6f69093cdf495f564397485e044">
                        <input type="radio" class="validation" name="attribute[267]" value="312" id="1598c6f69093cdf495f564397485e044" checked="checked">
                            <span class="name">Fair</span>
                        </input>
                    </label>
                </li>
            </ul>
            <div id="conditionExplanationWrapper">
                <span id="conditionExplanation">MESSAGE 1</span>
            </div>
        </div>
    </div>
    <div...

JavaScript

$('document').ready(conditionExplanation());

function conditionExplanation() {
    // Set vars for three conditions
    var excellentMessage = 'MESSAGE 1';
    var goodMessage = 'MESSAGE 2';
    var fairMessage = 'MESSAGE 3';

    // Assign finder class to div
    $('.productOptionViewRectangle:contains("Excellent")').addClass('conditionOption');

    // Build wrapper for message
    $('.conditionOption').append('<div id="conditionExplanationWrapper"><span id="conditionExplanation"></span></div>');

    // Insert message corresponding to .conditionOption .selectedValue
    $('.conditionOption label').live('click', function () {
        if ($('.conditionOption .selectedValue:contains("Excellent")')) {
            $('#conditionExplanation').html(excellentMessage);
        } else if ($('.conditionOption .selectedValue:contains("Good")')) {
            $('#conditionExplanation').html(goodMessage);
        } else if ($('.conditionOption .selectedValue:contains("Fair")')) {
            $('#conditionExplanation').html(fairMessage);
        }
    });
}