JSFiddle - React, Tailwind, and code Playground

HTML

<select id="selectapps" name="apps[]" class="selecter" multiple>
    <optgroup label="App Name">
        <option value="1|1">App Name : Category</option>
        <option value="1|2">App Name : Category</option>
        <option value="1|3">App Name : Category</option>
    </optgroup>
    <optgroup label="App Name 2">
        <option value="2|1">App Name 2 : Category</option>
        <option value="2|2">App Name 2 : Category</option>
    </optgroup>
</select>

JavaScript

var data = {
    "apps": [{
        "value": "1|1",
        "app_name": "Appen",
        "member_name": "Riven"
    }, {
        "value": "1|2",
        "app_name": "Appen",
        "member_name": "Filler"
    }, {
        "value": "1|3",
        "app_name": "Appen",
        "member_name": "Mello"
    }]
};

$('#selectapps').html('');
$.each(data.apps, function (index, value) {
    $('#selectapps').prepend('<optgroup label="' + value.app_name + '"><option value="' + value.value + '">' + value.app_name + ' : ' + value.member_name + '</option></optgroup>');
});