JSFiddle - React, Tailwind, and code Playground

by Gordon Watson

HTML

<form>
    <fieldset data-role="controlgroup" data-theme="b" data-type="horizontal" data-mini="true">
        <legend>Rate your understanding</legend>
        <input type="radio" name="traffic-lights" class="red" id="red" value="on" checked="checked">
            <label for="red"><img src="http://new.chemistry-teaching-resources.com/images/red-light18.png" width="18px" height="18px" ></label>
        <input type="radio" name="traffic-lights" class= "orange" id="orange" value="off">
        <label for="orange"><img src="http://new.chemistry-teaching-resources.com/images/Orange-light18.png" width="18px" height="18px"></label>
        <input type="radio" name="traffic-lights" class="green" id="green" value="other">
        <label for="green"><img src="http://new.chemistry-teaching-resources.com/images/green-light18.png" width="18px" height="18px"></label>
    </fieldset>
</form>
            
            <form>
    <fieldset data-role="controlgroup" data-theme="b" data-type="horizontal" data-mini="true">
        <legend>Rate your understanding</legend>
        <input type="radio" name="traffic-lights" class="red" id="red" value="on" checked="checked">
            <label for="red"><img src="http://new.chemistry-teaching-resources.com/images/red-light18.png" width="18px" height="18px" ></label>
        <input type="radio" name="traffic-lights" class= "orange" id="orange" value="off">
        <label for="orange"><img src="http://new.chemistry-teaching-resources.com/images/Orange-light18.png" width="18px" height="18px"></label>
        <input type="radio" name="traffic-lights" class="green" id="green" value="other">
        <label for="green"><img src="http://new.chemistry-teaching-resources.com/images/green-light18.png" width="18px" height="18px"></label>
    </fieldset>
</form>
            
            <form>
    <fieldset data-role="controlgroup" data-theme="b" data-type="horizontal" data-mini="true">
        <legend>Rate your understanding</legend>
        <input...

JavaScript

$(document).ready(function () {
    $(".red,.orange,.green").change(function () {
        $('.red_results').text($('.red:checked').length);
        $('.orange_results').text($('.orange:checked').length);
        $('.green_results').text($('.green:checked').length);
    });
});