JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="foreach : allowanceList">
  <div style="display : block; width : 100%">
    <span data-bind="text : allowanceTitle"></span>
  </div>
  <div style="margin-left : 20px; display : block; width : 100%" data-bind="foreach : fields">
    <div style="display : block; width : 100%">
      <label data-bind="text : title"></label>
      <!-- ko if : typeOfField() == "input"-->
      <input data-bind="value : $parent[$data.allowanceVariable()]" />
      <!-- /ko -->
    </div>
  </div>
  <br/>
</div>

JavaScript

function Allowance() {
  this.allowanceTitle = ko.observable();
  this.hours = ko.observable();
  this.rate = ko.observable();
  this.code = ko.observable();
  this.percent = ko.observable();
  this.fields = ko.observableArray([]);
}

function Field() {
  this.title = ko.observable();
  this.typeOfField = ko.observable();
  this.fieldSource = ko.observable();
  this.allowanceVariable = ko.observable();
}

function ViewModel() {
  this.allowanceList = ko.observableArray([]);
  this.allowanceList([
    new Allowance()
    .allowanceTitle('On Call')
    .hours(10)
    .rate(5)
    .code('')
    .percent('')
    .fields([
      new Field()
      .title('Hours')
      .typeOfField('input')
      .fieldSource('')
      .allowanceVariable('hours'),
      new Field()
      .title('Rate')
      .typeOfField('input')
      .fieldSource('')
      .allowanceVariable('rate')
    ]),
    new Allowance()
    .allowanceTitle('On Mail')
    .hours('')
    .rate('')
    .code('Text Code')
    .percent(5)
    .fields([
      new Field()
      .title('Code')
      .typeOfField('input')
      .fieldSource('')
      .allowanceVariable('code'),
      new Field()
      .title('Percent')
      .typeOfField('input')
      .fieldSource('')
      .allowanceVariable('percent')
    ])
  ]);
}

var viewModel = new ViewModel();
ko.applyBindings(viewModel);