JSFiddle - React, Tailwind, and code Playground

JavaScript

var json = {
    "group3": [
        {"value33": "label33"},
        {"value13": "label13"},
        {"value23": "label23"}
    ],
    "group1": [
        {"value21": "label21"},
        {"value31": "label31"},
        {"value11": "label11"}
    ],
    "group2": [
        {"value22": "label22"},
        {"value12": "label12"},
        {"value32": "label32"}
    ]
};

var body = document.getElementsByTagName("body")[0];

var select = document.createElement("select");
select.multiple = true;

for (group in json) {
    var optgroup = document.createElement("optgroup");
    optgroup.label = group;
    var i = 0, count = json[group].length;
    for (i; i < count; i++) {
        var opt = document.createElement("option");
        for (value in json[group][i]) {
            opt.value = value;
            opt.textContent = json[group][i][value];
        }
        optgroup.appendChild(opt);
    }
    select.appendChild(optgroup);
}

body.appendChild(select);