JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input type="text" name="input1" id="input1" placeholder="abc" />
    <input type="password" name="pass" id="pass" caption="password" />
    <input type="submit" value="Submit" />
    <select name="countries">
        <option name="Japan"></option>
        <option name="china"></option>
        <option name="korea"></option>
    </select>
</form>

JavaScript

function getAttrs(DOMelement) {
    var obj = {};
    $.each(DOMelement.attributes, function () {
        if (this.specified) {
            obj[this.name] = this.value;
        }
    });
    return obj;
}

$("form").each(function () {
    var json = {
        "form": []
    };
    $(this).find("input").each(function () {
        json.form.push(getAttrs(this));
    });

    $(this).find("select").each(function () {
        var select = getAttrs(this);
        select["type"] = "select";
        var options = [];
        $(this).children().each(function () {
            options.push(getAttrs(this));
        });
        select["options"] = options;
        json.form.push(select);
    });

    console.log(json);
});