JSFiddle - React, Tailwind, and code Playground

by Divine Chef

HTML

<div id="cosProfile">CoS Profile</div>
		<span class="icon-information"></span>
	<div class="form-field" data-radio id="cosRadioBtns">
		<span id="radio_prdefined"><input type="radio" name="CosProfile" data-radio value="predefined" checked="checked" disabled/></span>
			<label id="cos_predefined">Predefined Profile</label>
		<span id="radio_custom"><input type="radio" name="CosProfile" data-radio value="custom" disabled/></span>
			<label id="cos_custom">Custom Profile</label>
	</div>

JavaScript

$(document).ready(function(){
		$(':radio').radio();
		$('.cos_CustomDiv').hide();
			if(av.avpnData.cosPackageName=="No CoS") {
					var customProfile = 'custom';
					$("input[name='CosProfile'][value=" + customProfile  + "]").attr("disabled",true);
			} else {
					var cos6Value = true;		
					$("input[name='CosProfile']").change(function(){
						var cosProfileSelected = ($("input[name='CosProfile']:checked").val());
							if (cosProfileSelected == 'predefined') {
									$('.table_content').show();
									$('.cos_CustomDiv').hide();
							} else if (cosProfileSelected == 'custom') {
									$('.table_content').hide();
									$('.cos_CustomDiv').show();
								if (cos6Value == true) { 
									$('.ConfigureCos6Header').hide();
									$('.Configure6Div').hide();
								}
									cos6Value = false;
							}
					});
			}
	});