JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-group" data-bind="foreach: services">
    <label for="ServiceId" class="control-label col-md-2">Service</label>
    <div class="col-md-10">
        <select id="ServiceId" name="ServiceId" class="form-control" data-bind="foreach: $parent.servicesList, value: serviceId">
            <optgroup data-bind="attr: {label: Name}, foreach: Services">
                <option data-bind="text: Name,value:Id, option: Id"></option>
            </optgroup>
        </select>
    </div>
    Selected Value: <span data-bind="text: serviceId"></span>
    <br/>
    <hr/>
</div>

JavaScript

var vm = function () {
    var self = this;

    self.services = ko.observableArray([{
        serviceId: ko.observable(1)
    }, {
        serviceId: ko.observable(2)
    }]);


    self.servicesList = ko.observableArray([{
        Name: "Group 1",
        Services: [{
            Id: 1,
            Name: "One"
        }, {
            Id: 2,
            Name: "Two"
        }]
    }, {
        Name: "Group 2",
        Services: [{
            Id: 3,
            Name: "Three"
        }]
    }]);
    
}
ko.applyBindings(new vm());