JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
    <div class="btn btn-green btn-green-lg2 text-center" id="btn_test">	<a href="#">Click</a>

    </div>
    <div id="test_inner">
        	<h2>Test</h2> 
        <div class="test-item">
            	<h3>Ask?</h3>	
            <ol>
                <li>
                    <label>
                        <input type="radio" value="1" name="test1" /><span>Variant 1</span>

                    </label>
                    <li>
                        <label>
                            <input type="radio" value="2" name="test1" /><span>Variant 2</span>

                        </label>
                        <li>
                            <label>
                                <input type="radio" value="3" name="test1" /><span>Variant 3</span>

                            </label>
                            <li>
                                <label>
                                    <input type="radio" value="4" name="test1" /><span>Variant 4</span>

                                </label>
            </ol>
        </div>
        <div class="test-item">
            	<h3>Ask?</h3>	
            <ol>
                <li>
                    <label>
                        <input type="radio" value="1" name="test2" /><span>Variant 1</span>

                    </label>
                    <li>
                        <label>
                            <input type="radio" value="2" name="test2" /><span>Variant 2</span>

                        </label>
                        <li>
                            <label>
                                <input type="radio" value="3" name="test2" /><span>Variant 3</span>

                            </label>
                            <li>
                                <label>
                                    <input type="radio" value="4" name="test2" /><span>Variant 4</span>

                                </label>
            </ol>
        </div>
        <div class="test-item">
           ...

CSS

#test {
    margin-top: 50px;
}
#test h2 {
    margin-top: 30px;
}
#test_inner {
    display: none;
}
#btn_test {
    margin-top: 25px;
}
.test-item {
    margin: 25px auto;
}
.test-item > ol {
    padding-left: 30px;
    counter-reset: list;
}
.test-item > ol > li {
    margin: 10px 0;
    padding-left: 20px;
    position: relative;
}
.test-item > ol > li:before {
    content: counter(list, lower-alpha)") ";
    counter-increment: list;
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 700;
}
.test-item > ol > li input[type="radio"], .test-item > ol > li span {
    display: inline-block;
    vertical-align: middle;
}
.test-item > ol > li span {
    padding: 0 5px;
    position: relative;
}
.test-item > ol > li label input[type="radio"] {
    display: none;
}
.test-item > ol > li label input[type="radio"]:checked + span {
    background: #008000;
    color: #fff;
    display: block;
    padding: 1px 5px;
}
.test-item > ol > li label input[type="radio"]:checked + span:before {
    content:'\2714';
    position: absolute;
    top: 0;
    left: -40px;
    color: #008000;
    font-weight: 700;
}
.test-hidden {
    display: none;
}
.test-unhidden {
    display: block;
}
.test-result {
}
.test-result-item {
    margin: 25px auto;
    display: none;
}
#totalSum {
    text-align: center;
    font-weight: 700;
    font-size: 20px;
}

JavaScript

jQuery(function () {

    jQuery('#btn_test').click(function () {
        $(this).parent().children('#test_inner').slideToggle('500');
        return false;
    });


    jQuery("input[type='radio']").change(function () {
        calculate();
    });


    function calculate() {
        var sum = 0;

        jQuery("input[type='radio']:checked").each(function () {

            sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);

            jQuery("#totalSum").html(sum);

            $("input[type='radio']").change(function () {

                if (value <= 8) {
                    jQuery("#test_result_item_1").show();
                } else if ((9 <= value) && (value <= 12)) {
                    jQuery("#test_result_item_2").show();
                } else if ((13 <= value) && (value <= 17)) {
                    jQuery("#test_result_item_3").show();
                } else if (18 >= value) {
                    jQuery("#test_result_item_4").show();
                }


            });

        });
    }
});