JSFiddle - React, Tailwind, and code Playground

by alano

HTML

<div class="boxed-wide-outside">
    <div class="boxed-wide">
        <div class="half">
           
            <div id="conditional-field-agent-type-function" class="conditional-field controlling-field conditional-field-processed"><div class="form-item">
 <label>Select your type of Agents: <span class="form-required" title="This field is required.">*</span></label>
 <div class="form-radios"><div class="form-item" id="edit-field-agent-type-function-value-1-wrapper">
 <label class="option" for="edit-field-agent-type-function-value-1"><input type="radio" id="edit-field-agent-type-function-value-1" name="field_agent_type_function[value]" value="1" checked="checked" class="form-radio"> Single Channel</label>
</div>
<div class="form-item" id="edit-field-agent-type-function-value-3-wrapper">
 <label class="option" for="edit-field-agent-type-function-value-3"><input type="radio" id="edit-field-agent-type-function-value-3" name="field_agent_type_function[value]" value="3" class="form-radio"> Multi Channel</label>
</div>
</div>
</div>
</div>            <div id="conditional-field-agent-type-blended" class="conditional-field controlled-field controlling-field conditional-field-processed" style="display: none; "><div class="form-item" id="edit-field-agent-type-blended-value-wrapper" style="margin-top: 12px; margin-bottom: 12px; ">

</div>
</div>            <div class="subset">
                <div id="conditional-field-agent-work-flow-enabled" class="conditional-field controlled-field" style="display: none; "><div class="form-item" id="edit-field-agent-work-flow-enabled-value-wrapper" style="margin-top: 12px; margin-bottom: 12px; ">
 <label class="option" for="edit-field-agent-work-flow-enabled-value"><input type="checkbox" name="field_agent_work_flow_enabled[value]" id="edit-field-agent-work-flow-enabled-value" value="1" class="form-checkbox"> Our Center Is Work Flow Enabled</label>
</div>
</div>
</div>            </div>
        </div>

        <div...

JavaScript

function checkChannels() {
      if (($("#edit-field-agent-type-function-value-1:checked").size()) && 
      ($("[id^=edit-field-channel-]:checked").size() > 1)) {
            $('#single-channel').text('Select Multi Channel')
    };
}