JSFiddle - React, Tailwind, and code Playground

HTML

<form id="dataForm">
    
<h1>SECTION 1: GENDER</h1>

    <p>What is your gender?</p>
    <input type="radio" name="g1" value="Male" />Mail
    <input type="radio" name="g1" value="Female" />Female
    <hr />
    
<h1>SECTION 2: AGE</h1>

    <p>What is your age?</p>
    <input type="radio" name="g2" value="18–22" />18–22
    <input type="radio" name="g2" value="23–30" />23–30
    <hr />
    
<h1>SECTION 3: TRAITS</h1>

    
<h3>Choose Two:</h3>

    <input type="checkbox" name="g3" value="1" />Casual
    <br />
    <input type="checkbox" name="g3" value="10" />Cheerful
    <br />
    <input type="checkbox" name="g3" value="100" />Confident
    <br />
    <input type="checkbox" name="g3" value="1000" />Tough
    <br />
    <input type="submit" id="storeTraits" name="storeTraits" value="SUBMIT" />
    <br />
</form>
<hr />

<h2>Here is what I suggest</h2>

<p id="feedback">Feedback goes here.</p>

JavaScript

$(document).ready(function () {
    function getFeedback(gender, age, traits) {
        // Here's where you can have your nested if-statements,
        // and return different strings.
        if (g1 == 'Male') {
            if (g2 == '18–22' && g3 == 101) {
                return 'test1';
            } else if (g2 == '23–30' && g3 == 101) {
                return 'test2';
            }
        }

        return 'Gender: ' + g1 + ', ' + 'Age: ' + g2 + ', ' + 'Traits: ' + g3;
    }

    // Limit number of checkbox selections.
    var MAX = 2;
    $('#dataForm').find('input[name=g3]').change(function () {
        var nbrChecked = $('#dataForm').find('input[name=g3]:checked').length;
        if ((nbrChecked == MAX) && $(this).prop('checked')) {
            $('#dataForm').find('input[name=g3]:not(:checked)').prop('disabled', true);
        } else {
            $('#dataForm').find('input[name=g3]').prop('disabled', false);
        }
    });

    $('#dataForm').submit(function (e) {
        var $form = $(this);

        e.preventDefault(); // Don't post the form to the server.

        var g1 = $form.find('input[name=gender]:checked').val(),
            g2 = $form.find('input[name=age]:checked').val(),
            traits = 0;

        $form.find('input[name=traits]:checked').each(function () {
            g3 += parseInt($(this).val(), 10);
        });

        $('#feedback').html(getFeedback(g1, g2, g3));
    });

    $('#feedback').html('Answer all the questions.');
});