JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.3.0.js"></script>
<table>
<tr>
   <td>Brand:</td>
   <td><select data-bind="options: optionValues_brand, optionsCaption: 'Select One...', value: selectedBrand"></select></td>

   <td><button data-bind="click: addGroup">Add</button></td>
   </tr>
</table>


  <div>
                        <table border="1">
                            <thead>
                                <tr data-bind="foreach: groups">
                                    <th></th>
                                    <th data-bind="text: brand"></th>
                                </tr>
                            </thead>
                            <tbody data-bind="foreach: groups">
                                <tr>
                                    <td data-bind="text: brand"></td>
                                    <td><input type="number" /></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

JavaScript

var Group = function(brand,value) {
            this.brand = ko.observable(brand);
        };

      var ViewModel = function(groups) {
            var self = this;
     
        	self.optionValues_brand = ko.observableArray(["Brand1","Brand2","Brand3"]);
            self.selectedBrand = ko.observable();
          
          self.groups = ko.observableArray(ko.utils.arrayMap(groups, function(group) {
                return new Group(group.brand);
            }));

          
          self.addGroup = function() {
          		self.groups.push(new Group(self.selectedBrand()));
          }
      }
      
      var initialGroups = [];
       
        var viewModel = new ViewModel(initialGroups);
        ko.applyBindings(viewModel);