JSFiddle - React, Tailwind, and code Playground

by adiga

HTML

<select data-bind="value: roomID, options: $root.groups, optionsValue: 'Value', optionsText: 'Text', optionsCaption: ' -- select a room --'"></select>

JavaScript

var groups = [{
  majorGroup: "major0",
  minorGroup: "minor0",
  groupId: 0
}, {
  majorGroup: "major1",
  minorGroup: "minor1",
  groupId: 1
}];

var SellerViewModel = function(groups) {
  var self = this;

  self.roomID = ko.observable();
  self.json = ko.observableArray(groups);
  self.groups = ko.computed(function() {
    return self.json().map(function(group) {
      return {
        Text: group.majorGroup + " / " + group.minorGroup,
        Value: group.groupId
      }
    })
  });

  self.addGroup = function(group) {
    self.json.push({
      "ExtensionData": {},
      "contractId": "10006",
      "groupId": group.groupID,
      "imageId": null,
      "majorGroup": group.majorGroup,
      "minorGroup": group.minorGroup
    });
    console.log(JSON.stringify(self.json()));
  };
}

sellerViewModel = new SellerViewModel(groups);
ko.applyBindings(sellerViewModel);

var majorCount = 2,
  minorCount = 2,
  groupId = 2;
  
setInterval(() => {
  sellerViewModel.addGroup({
    majorGroup: "major" + majorCount++,
    minorGroup: "minor" + minorCount++,
    groupID: groupId++
  });
}, 3000);