JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
        <span id="selection">
        <input id="selection_0" type="radio" name="selection" value="0">
        <label for="selection_0" style="display:inline">Text-to-speech</label>
    <input id="selection_1" type="radio" name="selection" value="1">
        <label for="selection_1" style="display:inline">Recorded Messages</label>
    </span>
    </div>
      


<fieldset class="sectionwrap">
    <div id="text_to_speech"  style="display:none;">
        <div class="row">
            <label for="Ivrgroupz_WelcomeNotes">Welcome Notes</label>            <textarea rows="6" cols="50" name="Ivrgroupz[WelcomeNotes]" id="Ivrgroupz_WelcomeNotes"></textarea>                    </div>

        <div class="row">
            <label for="Ivrgroupz_audioWelcomeUrl">Audio Welcome Url</label>            <textarea rows="6" cols="50" name="Ivrgroupz[audioWelcomeUrl]" id="Ivrgroupz_audioWelcomeUrl"></textarea>                    </div>

        <div class="row">
            <label for="Ivrgroupz_selectionList">Selection List</label>            <textarea rows="6" cols="50" name="Ivrgroupz[selectionList]" id="Ivrgroupz_selectionList"></textarea>                    </div>

        <div class="row">
            <label for="Ivrgroupz_groupzName">Groupz Name</label>            <textarea rows="6" cols="50" name="Ivrgroupz[groupzName]" id="Ivrgroupz_groupzName"></textarea>                    </div>
    </div>


    <div id="recorded_messages"  style="display:none;">

        <div class="row">
        <label for="Ivrgroupz_WelcomeNotes">Welcome Notes</label>        <textarea rows="6" cols="50" name="Ivrgroupz[WelcomeNotes]" id="Ivrgroupz_WelcomeNotes"></textarea>                </div>

    <div class="row">
        <label for="Ivrgroupz_audioWelcomeUrl">Audio Welcome Url</label>        <textarea rows="6" cols="50" name="Ivrgroupz[audioWelcomeUrl]" id="Ivrgroupz_audioWelcomeUrl"></textarea>                </div>

    <div class="row">
        <label...

JavaScript

$( document ).ready(function() {
            
            $("#selection :input[name=selection]").change(function () {
                var radioId = $(this).attr("id");
                
                if(radioId=='selection_0'){
                alert(radioId);
                    $('#text_to_speech').show();
                $('#recorded_messages').hide();
                $('#recorded_messages').find('input, textarea, button, select').each(function () {
                    $(this).prop('disabled', true)});
                $('#text_to_speech').find('input, textarea, button, select').each(function () {
                    $(this).prop('disabled', false)});
                }
                else{
                alert(radioId);
                    $('#recorded_messages').show();
                $('#text_to_speech').hide();
                $('#recorded_messages').find('input, textarea, button, select').each(function () {
                    $(this).prop('disabled', false)});
                $('#text_to_speech').find('input, textarea, button, select').each(function () {
                    $(this).prop('disabled', true)});
                }
            });
          
        });