JSFiddle - React, Tailwind, and code Playground

HTML

<!-- ko foreach: seals -->
<div class="form-group">
    <label for="seal" class="col-xs-2 control-label" data-bind="text: 'Seal ' + name"></label>
    <div class="col-xs-8">
        <input type="text" class="form-control" data-bind="attr: {name: 'seal' + formName}" />
    </div>
</div>
<!-- /ko -->

CSS

td {
    padding: 10px;
}
tr.active td {
    background: red;
    color: #fff;
}

JavaScript

function demo() {
    //another model
}

/**
 * Add equipment
 */
function addEquipmentModel() {
    var self = this;
    var defaultSeal = {
        name: 'Seal 1',
        formName: 'seal[]'
    };

    self.seals = ko.observableArray([defaultSeal]);

    self.addSeal = function () {
        var number = self.seals().length + 1;
        console.log("number: " + number);

        self.seals.push({
            name: 'Seal ' + number,
            formName: 'seal[]'
        });
    }

    self.cleanSeals = function () {
        self.seals(defaultSeal);
    }

}

ko.applyBindings(demo, document.body);

ko.applyBindings(addEquipmentModel, document.getElementById('add-equipment-modal'));