JSFiddle - React, Tailwind, and code Playground

by Dragonseer

HTML

<button onclick="AddItem()">Add Item</button>

<div data-bind="foreach: {data: items, afterAdd: ShowItem}">
    <div class="nameCost">
        <input placeholder="Placeholder" data-bind="value: name"/>
        <input placeholder="Placeholder" data-bind="value: cost"/>
    <div>
</div>

  <script type='text/javascript' src='http://knockoutjs.com/downloads/knockout-3.0.0.js'></script>

JavaScript

function ShowItem(elem)
{
    $(elem).hide().slideDown("fast");
    $(elem).find("input").animate({ backgroundColor: "rgb(200,200,200)" }, 500);
}

function VM()
{
    this.items = ko.observableArray();
}

var vm = new VM();
ko.applyBindings(vm);

function AddItem()
{
    vm.items.push({name: "", cost: ""});

}