JSFiddle - React, Tailwind, and code Playground

by smlombardi

HTML

<input type="radio" name="q1" value="loner">    <input type="radio" name="q1" value="partier"    <input type="radio" name="q1" value="clueless">    <input type="radio" name="q1" value="romantic">    <input type="radio" name="q1" value="pragmatic">
<hr>
<input type="radio" name="q2" value="loner">    <input type="radio" name="q2" value="partier"    <input type="radio" name="q2" value="clueless">    <input type="radio" name="q2" value="romantic">    <input type="radio" name="q2" value="pragmatic">
<hr>
<input type="radio" name="q3" value="loner">    <input type="radio" name="q3" value="partier"    <input type="radio" name="q3" value="clueless">    <input type="radio" name="q3" value="romantic">    <input type="radio" name="q3" value="pragmatic">
<hr>
<input type="radio" name="q4" value="loner">    <input type="radio" name="q4" value="partier"    <input type="radio" name="q4" value="clueless">    <input type="radio" name="q4" value="romantic">    <input type="radio" name="q4" value="pragmatic">
<hr>
<input type="button" id="calculate" value="Calculate">
<hr>
<div id="results"></div>

JavaScript

$('#calculate').click(function() {
    var counter = {};
    
    $('input:radio').each(function() {
        var v = $(this).val();
        var x = (counter[v] || 0);
        counter[v] = (this.checked) ? x + 1 : x;
    });

    $.each(counter, function(x) {
        $('#results').append(x + '=' + this + '<br>');
    });
});