JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<ul>
<li><input name="alpha" type="radio" value="1" /> alpha=1</li>
<li><input name="alpha" type="radio" value="2" /> alpha=2</li>
<li><input name="alpha" type="checkbox" value="3" /> alpha=3</li>
<li><input name="beta" type="checkbox" value="1" checked /> beta=1</li>
<li><input name="beta" type="checkbox" value="2" checked /> beta=2</li>
<li><select name="delta">
    <option value="3">delta=3</option>
    </select>
</li>
</ul>
<input name="continue" type="button" value="continue" id="continue" />

<div id="processing">
<p><span>name</span><span>element</span><span>type</span><span>state</span><span>value</span></p>
</div>
<p id="data"></p>
<p id="count"></p>
<p id="output"></p>
</form>

CSS

p {
        display:table-row;
    }
    p:first-child {
        font-weight:bold;
    }
    span {
        display:table-cell;
        padding:4px;
        border: 1px solid #EEEEEE;
    }

JavaScript

// JavaScript Document

var Arr1 = [],
    Arr2 = {},
    Arr3 = {},
    I = 0;
    
$("#continue").click(function() {
    $("input, select").each(function() {
        var n = $(this).attr("name"),
            e = this.tagName.toLowerCase(),
            t = $(this).attr("type"),
            s = $(this).prop("checked"),
            v = this.value;
        Arr1[I] = [n,e,t,s,v]; //stores data
        Arr2[n] = +1; //counts instances of n
        $("div#processing").append("<p><span>"+n+"</span><span>"+e+"</span><span>"+t+"</span><span>"+s+"</span><span>"+v+"</span></p>");
    });
    for (i=0; i < Arr1.length; i++) {
        var nom = Arr1[i][0],
            element = Arr1[i][1],
            type = Arr1[i][2],
            state = Arr1[i][3],
            val = Arr1[i][4];
        if (element=="input") {
            switch(type) {
                case ("checkbox" || "radio"):
                    if (state) {
                        if (Arr2[nom] > 1) {
                            Arr3[nom] += val;
                        } else {
                            Arr3[nom] = val;
                        }
                    }
                    break;
                case "text":
                    Arr3[nom] = val;
                    break;
                default:break;
            }//switch
        } else if (element=="select") {
            Arr3[nom] = val;
        }//elseif
    }//for
    
     alert(Arr1.toSource());
    alert(Arr2.toSource());
    
   // $("p#data").html(Arr1.toSource());
   // $("p#count").html(Arr2.toSource());//
 //   $("p#output").html(Arr2.toSource());
    
   
    
});