JSFiddle - React, Tailwind, and code Playground

HTML

<select name="products" class="product" id="product">
<optgroup label="Category 1">
</optgroup>
<optgroup label="Category 2">
</optgroup>
<optgroup label="Category 3">
</optgroup>
</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":"181","name":"Name 8","category":"Category 2"},{"id":"180","name":"Name 9","category":"Category 3"},{"id":"178","name":"Name 10","category":"Category 2"}]
;

$.each(data, function(i,item){
    $("<option/>")
        .attr("value", item.id)
        .append(item.name)
        .appendTo("optgroup[label='" + item.category + "']");
});