JSFiddle - React, Tailwind, and code Playground

by Gordon Watson

HTML

<form style="text-align:center;">
    <fieldset data-role="controlgroup" data-theme="b" data-type="horizontal" data-mini="true">
        <legend>Rate your understanding</legend>
        <input type="radio" name="traffic-lights-4" class="red" id="red4" value="on" checked="checked">
            <label for="red4"  title="Select Red if you are still uncertain you understand the right answer"><img src="http://www.new.chemistry-teaching-resources.com/images/red-light18.png" width="18" height="18" alt=" "></label>
        <input type="radio" name="traffic-lights-4" class= "orange" id="orange4" value="off">
        <label for="orange4"  title="Select Orange if you almost knew the right answer"><img src="http://www.new.chemistry-teaching-resources.com/images/Orange-light18.png" width="18" height="18" alt=" "></label>
        <input type="radio" name="traffic-lights-4" class="green" id="green4" value="other">
        <label for="green4"  title="Select Green if you are confident you knew the right answer"><img src="http://www.new.chemistry-teaching-resources.com/images/green-light18.png" width="18" height="18" alt=" "></label>
    </fieldset>
</form>    
            
            




<div class="ui-grid-b" style="padding-top:20px;">
  <div class="ui-block-a redCounter ui-shadow"><p style="text-align:center; padding-top:0px;"><img src="http://www.new.chemistry-teaching-resources.com/images/red-light18.png" alt=""> Reds</p><div class="ui-btn-b redOutput">0</div></div>
  <div class="ui-block-b orangeCounter ui-shadow" ><p style="text-align:center; padding-top:0px;"><img src="http://www.new.chemistry-teaching-resources.com/images/Orange-light18.png" alt=""> Oranges</p><div class="ui-btn-b orangeOutput">0</div></div>
  <div class="ui-block-c greenCounter ui-shadow" ><p style="text-align:center; padding-top:0px;"><img src="http://www.new.chemistry-teaching-resources.com/images/green-light18.png" alt=""> Greens</p><div  class="ui-btn-b greenOutput">0</div></div>
</div>

JavaScript

$(document).ready(function() {
$('.red').click(function() {
    $('.redOutput').html(function(i, val) { return val*1+1 });
});

$('.orange').click(function() {
    $('.orangeOutput').html(function(i, val) { return val*1+1 });
});

$('.green').click(function() {
    $('.greenOutput').html(function(i, val) { return val*1+1 });
});
});