JSFiddle - React, Tailwind, and code Playground

HTML

<div class="checkgroup checkboxes">
    <input type="checkbox" value="checked" checked="false" id="firstchecbox"
    /><span>one check</span>

    <input type="checkbox" checked="true" id="secondchecbox"
    /><span>two check</span>

    <input type="checkbox" checked="false" id="thirdchecbox"
    /><span>three check</span>

    <input type="checkbox" checked id="fourthcheckbox"
    /><span>four check</span>

    <input type="checkbox" id="fifthcheckbox" /><span>five check</span>

</div>
<div class="radiogroup radiobuttons">
    <input type="radio" value="checked" checked="false" id="firstradio" /><span>one radio</span>

    <input type="radio" checked="true" id="secondradio"
    /><span>two radio</span>

    <input type="radio" checked="false" id="thirdradio"
    /><span>three radio</span>

    <input type="radio" checked id="fourthradio" /><span>four radio</span>

    <input type="radio" id="fifthradio" /><span>five radio</span>

    <input type="radio" checked="friday" id="sixthradio"
    /><span>six radio</span>

</div>
<div class="radiogroup radiobuttonNamed">
    <input type="radio" name="myradios" value="checked" checked="false" id="firstradio"
    /><span>one radio</span>

    <input type="radio" name="myradios" checked="true"
    id="secondradionamed" /><span>two radio myrad</span>

    <input type="radio" name="myradios" checked="false"
    id="thirdradionamed" /><span>three radio myrad</span>

    <input type="radio" name="myradios" checked
    id="fourthradionamed" /><span>four radio myrad</span>

    <input type="radio" name="myradios" id="fifthradionamed"
    /><span>five radio myrad</span>

    <input type="radio" name="myradios" checked="fridaynamed"
    id="sixthradionamed" /><span>six radio myrad</span>

</div>
<div class="group textboxes">
    <input type="textbox" id="textboxone" value="textbox one" /><span>one textbx</span>

    <input type="textbox" id="textboxtwo" /><span>two textbx</span>

    <input type="textbox" id="textboxthree"...

CSS

#showem {
    border: 1px solid red;
}
.textboxes input, .texts input {
    display:block
}
.group, .radiogroup, .checkgroup {
    border:solid red 1px;
    margin:1px;
}
.ShowGroup {
    border:solid blue 1px;
    margin:1px;
}
.ShowGroup span {
    margin:1px;
}
.aspan {
    border:1px solid lime;
    display:block;
}
#controls {
    background-color:aqua;
}

JavaScript

var ashow = "<div class='ShowGroup'>Group<div class='groupClass'>Class:'";
var ashowend = "'</div></div>";
var aspan = '<span class="aspan">';
var aspanEnd = "</span>";
//alert(ashow);
function showNonSelects() {
    $(".group").each(function () {
        var mygroup = $(this);
        var groupIdentifier = ashow + mygroup.attr('class') + ashowend;
        $('#showem').append(groupIdentifier);
        var thisResult = $('#showem').find('.ShowGroup:last');
        mygroup.children().each(function () {
            var getStuff = "";
            thisResult.append((this.tagName == "SPAN" ? "" : (aspan + "(" + this.type + ":" + this.tagName + ")" + ":" + ($(this).attr("type") ? (" attrType:" + $(this).attr("type") + " propType:" + $(this).prop("type")) : ""))) + aspanEnd);
        });
    });
};

function showSelects() {
    $(".selectgroup").each(function () {
        var mygroup = $(this);
        var groupIdentifier = ashow + mygroup.attr('class') + ashowend;
        $('#showem').append(groupIdentifier);
        var thisResult = $('#showem').find('.ShowGroup:last');
        mygroup.children().each(function () {
            var getStuff = "";
            var shw = aspan + "(" + this.type + ":" + this.tagName + ")";
            shw += "(" + ($(this).attr("type") ? " attrType:" + $(this).attr("type") : "") + ")";
            shw += "(" + ($(this).prop('type') ? " propType:" + $(this).prop("type") : "") + ")";
            shw += " val:" + $(this).val();
            shw+= " raw:"+$(this).value;
            shw += " selectedText:'" + $(this).find(":selected").text();
            shw += "' allText:'" + $(this).text() + "'";
            var shwOpts = "";
            $(this).children().each(function () {
                shwOpts += (this.tagName == "SPAN" ? "" : (aspan + " (" + this.type + ": " + this.tagName + ")" + ": " + ($(this).attr("type") ? (" attrType:" + $(this).attr("type") + " propType:" + $(this).prop("type")) : ""))) + " val:" + $(this).val() + " text:" +...