JSFiddle - React, Tailwind, and code Playground

HTML

<select id="browsers" style="max-height: 150px; overflow: auto;"></select>

JavaScript

var example = [
{
    "browser": "Amazon Silk 3.30"
},
{
    "browser": "Amazon Silk 49.2"
},
{
    "browser": "Edge 42.11"
},
{
    "browser": "Edge 42.15"
},
{
    "browser": "Google Chrome 0.01"
},
{
    "browser": "Google Chrome 0.03"
},
{
    "browser": "Edge 42.13"
},
{
    "browser": "Amazon Silk 50"
}
]

var grouped_browsers = {
	'Edge': [],
	'Amazon': [],
	'Chrome': []
};
$.each(example, function() {
	if (this.browser.indexOf('Edge') !== -1) {
		grouped_browsers['Edge'].push(this.browser);
	} else if (this.browser.indexOf('Amazon') !== -1) {
		grouped_browsers['Amazon'].push(this.browser);
	} else if (this.browser.indexOf('Chrome') !== -1) {
		grouped_browsers['Chrome'].push(this.browser);
	} else {
		grouped_browsers['Other'].push(this.browser);
	}
});

var rendered_groups = '';
var formatted_browsers = {
	'Amazon': 'Amazon Silk',
	'Chrome': 'Google Chrome',
	'Edge': 'Edge'
};
$.each(grouped_browsers, function(key, value) {
	rendered_groups += '<optgroup label="'+formatted_browsers[key]+'">';
	$.each(value, function() {
		rendered_groups += '<option value="'+this+'">'+this+'</option>';
	});
	rendered_groups += '</optgroup>';
	
});
$('#browsers').html(rendered_groups);