JSFiddle - React, Tailwind, and code Playground

HTML

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

</select>

JavaScript

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

var select = $('#product');
$.each(data, function (key, cat) {
    var option = "<option value='"+cat.id+"'>"+cat.name+"</option>";
    
    if (cat.hasOwnProperty("category")) {
        var group = cat.category;
        
        if (select.find("optgroup[label='" + group + "']").length === 0) {
            select.append("<optgroup label='" + group + "' />");
        }
        
        select.find("optgroup[label='" + group + "']").append(option);
    } else {
        select.append(option);
    }        
});