JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<div id="main" onkeypress="mainKeypress(this,event)">
    <div class="row">
        <div class="col-md-6">
            <div class="row">
                <div class="form-group">
                    <label class="col-md-3 control-label">Batch No:</label>
                    <div class="col-md-9">
                        <input type="text" id="BatchNo" class="form-control" data-bind="value: Batch.BatchNo" disabled /> 
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="col-md-3 control-label">Scheme:</label>
                    <div class="col-md-9">
                        <select class="form-control" id="Scheme" data-bind="scheme: { data: schemes(), placeholder: '',  }, selectedOptions: Batch.SchemeId">
                            <!-- ko if: schemes().length === 0 -->
                            <option disabled="disabled">No schemes found</option>
                            <!-- /ko -->
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <label class="col-md-3 control-label">Site:</label>
                    <div class="col-md-9">
                        <input type="text" id="Site" class="form-control" data-bind="value: Batch.Site" disabled /> 
                    </div>
                </div>
            </div>
           ...

JavaScript

var myVm;
    var dialog;
    
    function Batch() {
        var self = this;

        // match to BatchVm
        self.Id = ko.observable();
        self.BatchNo = ko.observable();
        self.SourceId = ko.observable("1");
        self.SchemeId = ko.observable();
        //self.RecievedDT = ko.observable(moment().format('DD/MM/YYYY'));
        self.RecordedDeliveryNo = ko.observable();
        self.TamperedEnvelope = ko.observable(false);
        self.IncorrectPrice = ko.observable();
        self.LateDelivery = ko.observable(false);
        self.BatchItems = ko.observableArray();
        self.PrintDocuments = ko.observable(true);
        self.Duration = ko.observable();
        self.Site = ko.observable();
    }
    
    function BatchItem() {
        var self = this;

        // match to BatchItemVm
        self.Id = ko.observable();
        self.BatchId = ko.observable();
        self.DocumentTypeId = ko.observable();
        self.DocumentType = ko.observable();
        self.ItemTypeId = ko.observable();
        self.ItemType = ko.observable();
        self.NINo = ko.observable();
        self.MemberName = ko.observable();
        self.ReferenceNo = ko.observable();
        self.Questions = ko.observableArray();
        self.Answers = ko.observableArray();
        self.Duration = ko.observable();
    }
    
    function ViewModel() {
        var self = this;

        self.Batch = new Batch();
        
        self.addNewBatchItem = function(){
        	var bi = new BatchItem();
          bi.DocumentType('Doc1');
          bi.ItemType('Item1');
          self.Batch.BatchItems.push(bi);
          console.log(self.Batch.BatchItems()[0].DocumentType());
          console.log(self.Batch.BatchItems()[0].ItemType());
        }

        self.schemes = ko.observableArray([{"id":"1","text":"3M Pension and Life Assurance Scheme","adminLocation":"Bristol"},{"id":"2","text":"AA Pension Scheme","adminLocation":"Farnborough"},{"id":"3","text":"AETC Pension Scheme...