JSFiddle - React, Tailwind, and code Playground

by thebluenile

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"></script>
<h4>Strain Information : </h4>
<!-- ko foreach: row -->
<table>
    <tbody>
    <tr>
        <td class="firstCol">Stock number : </td>
        <td><span id="SummaryP1_StockNum" data-bind="text: stockNumber"></span></td>
    </tr>
    <tr>
        <td class="firstCol">Product Needed : </td>
        <td>
            <span id="SummaryP1_pdtNeeded" data-bind="text: pdtNeeded"></span>
            <span data-bind="visible: pdtNeeded() == 'Other'">
                <span id="SummaryP1_pdtNeededPleaseExplain" data-bind="text: pdtNeededPleaseExplain"></span>
            </span>
        </td>
    </tr>
    <tr>
        <td class="firstCol">Requested Ship Date : </td>
        <td><span id="SummaryP1_RequestedShipDate" data-bind="text: requestedShipDate"></span></td>
    </tr>
    <tr>
        <td class="firstCol">Aditional Information : </td>
        <td><span id="SummaryP1_AdditionalInformation" data-bind="text: additionalInformation"></span></td>
    </tr>
    <tr>
        <td><button type="button" data-bind="click: $parent.removeRow">
            Remove
        </button></td>
    </tr>
</table>
<hr />
<!-- /ko -->
<button type="button" data-bind="click: addRow">
    Add
</button>

JavaScript

function ViewModel() {
	var vm = this;
    
    vm.row = ko.observableArray();
    
    vm.addRow = function () {
    	vm.row.push({
        	stockNumber: ko.observable(1),
            pdtNeeded: ko.observable('Other'),
            pdtNeededPleaseExplain: ko.observable('Hello'),
            requestedShipDate: ko.observable(),
            additionalInformation: ko.observable()
        })
    }
    
    vm.removeRow = function (item) {
    	vm.row.remove(item);
    }
}

ko.applyBindings(new ViewModel());