JSFiddle - React, Tailwind, and code Playground

HTML

<table class="dataTable" id="CADataTable">
    <thead>
        <tr>
            <th>Type</th>
            <th>Name</th>
            <th>Adress</th>
            <th>ID Number</th>
            <th>Contact</th>
            <th>Note</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: creditRows">
        <tr>
            <td>
                <select name="CAType" id="CAType" data-bind="value: CAType" style="width: 12em;">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
            </td>
            <!-- <td><input type="text" name="CAType" data-bind="value: CAType" style="width: 9em;"></td> -->
            <td>
                <input type="text" name="CAName" data-bind="value: CAName" style="width: 15em;" />
            </td>
            <td>
                <input type="text" name="CAAdress" data-bind="value: CAAdress" style="width: 15em;" />
            </td>
            <td>
                <input type="text" name="CAIdNum" data-bind="value: CAIdNum" style="width: 6em;" />
            </td>
            <td>
                <input type="text" name="CAContact" data-bind="value: CAContact" style="width: 10em;" />
            </td>
            <td>
                <input type="text" name="CANote" data-bind="value: CANote" style="width: 15em;" />
            </td>
        </tr>
    </tbody>
</table>
<button type="button" id="export" class="button" data-bind="click: newCreditRows">Add new row</button>

JavaScript

var CA = function() {
    this.CAName = null;
    this.CAAdress= null;
    this.CAIdNum = null;
    this.CAContact = null;
    this.CAName = null;
    this.CANote= null;
    this.CAType = null;
};

var vm = {
    newCreditRows : function () {

        this.creditRows.push(new CA());
    },
    creditRows : ko.observableArray()
};


ko.applyBindings(vm);