JSFiddle - React, Tailwind, and code Playground

by Blake Plumb

HTML

<div class="controls">    
    <label class="radio inline">           <input type="radio" name="travel" data-travelNumber="1" id="travel_yes_1" value="Yes" tabindex="25" >         Yes </label>     <label class="radio inline">         <input name="travel" type="radio" data-travelNumber="1" id="travel_no_1" value="No" tabindex="26" checked >         No </label> </div> <div class="controls">     <textarea name="travelDetails" id="travelDetails_1" ></textarea> </div>  <div class="controls">     <label class="radio inline">         <input type="radio" name="travel" data-travelNumber="2" id="travel_yes_2" value="Yes" tabindex="25" >         Yes </label>     <label class="radio inline">         <input name="travel" type="radio" data-travelNumber="2" id="travel_no_2" value="No" tabindex="26" checked >         No </label> </div> <div class="controls">     <textarea name="travelDetails" id="travelDetails_2"></textarea> </div>   <div class="controls">     <label class="radio inline">         <input type="radio" name="travel" data-travelNumber="3" id="travel_yes_3" value="Yes" tabindex="25" >         Yes </label>     <label class="radio inline">         <input name="travel" type="radio" data-travelNumber="3" id="travel_no_3" value="No" tabindex="26" checked >         No </label> </div> <div class="controls">     <textarea name="travelDetails" id="travelDetails_3"></textarea> </div>

JavaScript

$(":radio[data-travelNumber]").each(function() {      
    $(this).data("travelNumber", $(this).attr('data-travelNumber'));         
    
    $(this).live('click',function(){
        if ( $(this).val() === 'Yes' ) {            
            $('#travelDetails_' +$(this).data('travelNumber')).removeAttr('disabled'); 
        }            
        else{                 
            $('#travelDetails_' + $(this).data('travelNumber')).attr("disabled", "disabled");
        }            
    });       
});