JSFiddle - React, Tailwind, and code Playground

by Stefan Zamfira

HTML

<div id="extra_options">
    <label><input type="radio" name="extraOption" value="1" /> Extra option 1</label>
    <label><input type="radio" name="extraOption" value="2" /> Extra option 2</label>
    <label><input type="radio" name="extraOption" value="3" /> Extra option 3</label>
</div>

<form action="#" method="post">
    <input type="radio" name="option" class="option_select" value="1" /> Option 1<br />
    <input type="radio" name="option" class="option_select" value="2" /> Option 2<br />
    <input type="radio" name="option" class="option_select" value="3" /> Option 3<br />
    <input type="submit" name="submit" value="Submit" />
</form>

CSS

#extra_options { display:block; }
#extra_options > * { display:none; }

JavaScript

$(document).ready(function() {
        $('form > input').click(function(){
            var t = $(this),
                extra = $('#extra_options');
            
            $('input[value=' + t.val() + ']', extra)
                .parent()
                .show()
                .siblings()
                .hide();
            
        });
    });