JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<table>
    <tr>
     <td>
      Customer Sentiment:
    </td>
    <td colspan="3">
    <div id="sentiment">
        <input class="xhide" type="radio" id="Good" value="1"   name="sentimentID" /><label for="Good">Good</label>
        <input class="xhide" type="radio" id="Improving" value="2" name="sentimentID" checked /><label for="Improving">Improving</label>
        <input class="xshow" type="radio" id="Worsening" value="3" name="sentimentID" /><label for="Worsening">Worsening</label>
        <input class="xshow" type="radio" id="Poor" value="4"   name="sentimentID"  /><label for="Poor">Poor</label>
    </div>
    </td>
</tr>                        

<tr class="rnotes"">
    <td valign="top">Sentiment Notes:</td>
    <td colspan="3">
        <cfoutput>
        <textarea   name="sentimentNotes"
                    cols="100"
                    rows="4">#sentimentNotes#</textarea>
        </cfoutput>
    </td>
</tr>
</table>

JavaScript

$(".rnotes").hide();

    $('input[type=radio]').change(function(){
        var isChecked = $(this).prop('checked');
        var isShow = $(this).hasClass('xshow');
        $(".rnotes").toggle(isChecked && isShow);
    });