JSFiddle - React, Tailwind, and code Playground

by Sam G

HTML

<div>
    <label>
        <input type="radio" name="colorRadio" value="red">red</label>
    <label>
        <input type="radio" name="colorRadio" value="green">green</label>
    <label>
        <input type="radio" name="colorRadio" value="blue">blue</label>
</div>
<form id="myform">
    <div class="red box">
        <input type="text">
    </div>
    <div class="green box">
        <input type="text">
    </div>
    <div class="blue box">
        <input type="text">
    </div>
    <input type="submit">
</form>

CSS

.box {
    padding: 20px;
    display: none;
    margin-top: 20px;
    border: 1px solid #000;
}
.red {
    background: #ff0000;
}
.green {
    background: #00ff00;
}
.blue {
    background: #0000ff;
}

JavaScript

$('input[type="radio"]').click(function () {
    if ($(this).val() == "red") {
        $(".box").hide();
        $(".red").show();
        $(".box input[type=text]").val("It Works!");
        $(".red input[type=text]").val("ahhaaa!");
    }
    if ($(this).val() == "green") {
        $(".box").hide();
        $(".green").show();
        $(".box input[type=text]").val("It Works!");
        $(".green input[type=text]").val("ahhaaa!");
    }
    if ($(this).val() == "blue") {
        $(".box").hide();
        $(".blue").show();
        $(".box input[type=text]").val("It Works!");
        $(".blue input[type=text]").val("ahhaaa!");
    }
});

$('form').on('submit', function(e) {
    e.preventDefault();
    $(".box input[type=text]").each(function() {
        console.log($(this).parent().prop('class') + ": " + $(this).val());
    });
});