JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<div id='mapped'>
  <table>
      <thead>
          <th>Alpha</th>
          <th>Beta</th>
      </thead>
  <tbody data-bind='foreach: outer'>
       <tr>
           <td><input data-bind='value: $data.alpha'></td>
           <td>
               <b>Beta</b>
               <ul data-bind='foreach: $data.beta'>
                   <li>Carotine: <input data-bind='value: carotine'/><br/>
                       Blockers: <input data-bind='value: blockers'/></li>
               </ul>
               <button data-bind='click: $root.append_beta'>
                   Add another beta</button>
           </td>
       </tr>
  </tbody>
  </table>
  <button data-bind='click: append_outer'>Add another outer</button>
</div>

CSS

table {
  margin: 24px;   
    padding: 5px;
    border-collapse:separate;
    border-spacing:10px 5px;
}

thead {
  font-weight: bold;   
}

th {
  border-bottom: 1px solid gray;   
}

td {
  vertical-align: top;   
}

ul {
  margin: 15px;
  list-style: disc;   
}

JavaScript

var mapping, baseModel, view_model;

mapping = {
    outer: [{
        alpha: '',
        beta: [
            {
            carotine: '',
            blockers: ''}
        ]}
                       ]
};

baseModel = { // add in functionality
    append_outer: function() {
        this.outer.push({'hi'});
    },
    append_beta: function(xyz) {
        this.beta.push({});
    }
};

view_model = ko.mapping.fromJS(mapping, {}, baseModel);

ko.applyBindings(view_model, $("#mapped")[0]);