JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<select id="lang"></select>

JavaScript

var data = [
    {
        name: "English Languages",
        values: ["English 1", "English 2", "English 3", "English 4"]
    },
    {
        name: "French Languages",
        values: ["French 1", "French 2", "French 3", "French 4"]
    },
    {
        name: "Spanish Languages",
        values: ["Spanish 1", "Spanish 2", "Spanish 3", "Spanish 4"]
    }
];
    
for(var i = 0; i < data.length; i++) {
    var category = data[i];
    var optgroup = $("<optgroup>").prop("label", category.name);
    for(var j = 0; j < category.values.length; j++)
        optgroup.append($("<option>").text(category.values[i]));
    
    $("#lang").append(optgroup);
}