JSFiddle - React, Tailwind, and code Playground

HTML

<form class="multiForm trueFalse">
    <ul>
        <li>
            <input data-correctanswer="correct" name="question1" type="radio"><span>A</span>

        </li>
        <li>
            <input name="question1" type="radio"><span>B</span>

        </li>
    </ul>
    <ul>
        <li>
            <input name="question2" type="radio" checked="checked"><span>C</span>

        </li>
        <li>
            <input data-correctanswer="correct" name="question2" type="radio"><span>D</span>

        </li>
    </ul>
    <ul>
        <li>
            <input name="question3" type="radio"><span>E</span>

        </li>
        <li>
            <input data-correctanswer="correct" name="question3" type="radio" checked="checked"><span>F</span>

        </li>
    </ul>
    <ul>
        <li>
            <input name="question4" type="radio"><span>G</span>

        </li>
        <li>
            <input data-correctanswer="correct" name="question4" type="radio"><span>H</span>

        </li>
    </ul>
</form>

JavaScript

$(document).ready(function () {
        var arr = [];
        $('.multiForm ul').each(function () {
            var x = $(":radio", this);
            var cond = x.filter(":not(:checked)").length === x.length;
            
            if (cond) {
                x.filter("[data-correctanswer]").closest("li").css("color","red");
            }
        });
       
    });