JSFiddle - React, Tailwind, and code Playground

HTML

<select name="products" class="product" id="product">

</select>

JavaScript

var data = {
    "Category 1":[
        {"id": "210","name": "Name 1"},
        {"id": "187","name": "Name 2"},
        {"id": "186","name": "Name 3"},
        {"id": "185","name": "Name 4"},
        {"id": "184","name": "Name 5"},
        {"id": "183","name": "Name 6"},
        {"id": "182","name": "Name 7"}
    ],
    "Category 2":[
        { "id": "181","name": "Name 8"},
        {"id": "178","name": "Name 10"}
    ],
    "Category 3": [
        {"id": "180","name": "Name 9"}
    ]
};

var product = $('#product');
$.each(data, function (key, cat) {
    var group = $('<optgroup>',{label:key});
    $.each(cat,function(i,item) {
        $("<option/>",{value:item.id,text:item.name})
            .appendTo(group);
    });
    group.appendTo( product );
});