JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<div>
     <h3>1. How old are you?</h3>

    <input type="radio" data-mess="whats up" name="q1" value="A" class="correct" />A. 1-50.
    <input type="radio" data-mess="You did it" name="q1" value="B" class="correct" />B. 50-100.
    <input class="button" type="submit" value="Submit" />
    <input type="reset" value="Clear" />
    <p class="answer"></p>
</div>
<div>
     <h3>2. How old are you?</h3>

    <input type="radio" data-mess="whats up" name="q2" value="A" class="correct" />A. 1-50.
    <input type="radio" data-mess="You did it" name="q2" value="B" class="correct" />B. 50-100.
    <input class="button" type="submit" value="Submit" />
    <input type="reset" value="Clear" />
    <p class="answer"></p>
</div>

JavaScript

$('.button').click(function () {
    var checked = $(this).parent().find('input:checked').data('mess');
    $(this).parent().find('.answer p').remove();
    $(this).parent().find('.answer').append("<p>" + checked + "</p>");
});
$('input[value="Clear"]').click(function () {
    $(this).parent().find('.answer p').remove();
});