JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div id="Chapters">
    <ol type="1">
        <li><a href="#Ch1">Chapter 1</a>

        </li>
        <li><a href="#Ch3">Chapter 3</a>

        </li>
        <li><a href="#Ch4">Chapter 4</a>

        </li>
    </ol>
    <div id="Ch1" title="Chapter 1">
        	<h2>Chapter 1</h2>

        <div class="questions">
            	<h3>Question 1</h3> <input type="radio" name="test">

            <div>
                <p>under construction</p>
            </div>
            	<h3>Question 2</h3> <input type="radio" name="test2">

            <div>
                <p>under construction</p>
            </div>
             <h3>Question 3</h3>

            <div>
                <p>under construction</p>
            </div>
        </div>
    </div>
    <div id="Ch3" title="Chapter 3">
        	<h2>Chapter 3</h2>

        <div class="questions">
            	<h3>Question 1</h3>

            <div>
                <p>under construction</p>
            </div>
            	<h3>Question 2</h3>

            <div>
                <p>under construction</p>
            </div>
             <h3>Question 3</h3>

            <div>
                <p>under construction</p>
            </div>
        </div>
    </div>
    <div id="Ch4" title="Chapter 4">
        	<h2 class="Chapter">Chapter 4. Navigation</h2>

        <div class="SubChapter" id="SubCh1" title="Policies, Procedures and Documentation">
            	<h3>Policies, Procedures and Documentation</h3>

            <div>
                <p>Content</p>
            </div>
            <div class="questions">
                <div id="Q401">
                    <table id="QTable">
                        <tr>
                            <td width="45" align="left" valign="top" scope="row">
                                <div...

JavaScript

$(function () {
    $(".questions").accordion({
        collapsible: true,
        active: false,
        autoHeight: false
    });
    $("#Chapters").tabs();

    // Hover states on the static widgets
    $("#dialog-link").hover(

    function () {
        $(this).addClass("ui-state-hover");
    },

    function () {
        $(this).removeClass("ui-state-hover");
    });
});

jQuery(function () {
    $('.Response input[type=radio]').change(function () {
        console.log(this.value)
        if (this.value == 'Y') {
            $(this).closest('.ui-accordion-content').prev().css("background", "green"); 
        } else if (this.value == 'N') {
            $(this).closest('.ui-accordion-content').prev().css("background", "red"); 
        }
    });
});