Knockout example

view.html

<div data-bind="with: people">

Important people:
<label>First Name</label>
<input type="text" data-bind="value: first" />
<label>Last Name</label></div>
<input type="text" data-bind="value: last" />
<button data-bind="click: addPerson">Add Person</button>
<button data-bind="click: remove">Remove Person</button>

vm.js

$(function() {
/**
* A collection of people with helper functions to add and remove.
*/
function peopleModel() {
    /**
    * The collection of people for this view model.
    */
    this.people = ko.observableArray([
        { firstName: "Erich", lastName: "Gamma" },
        { firstName: "Richard", lastName: "Helm" },
        { firstName: "Ralph", lastName: "Johnson" },
        { firstName: "John", lastName: "Vlissides" }
    ]);

    /**
    * Adds a new person using a generic first and last name.
    */
    this.addPerson = function() {
        this.people.push({firstName: "New", lastName: "Person" });
    };

    this.remove = function() {
        this.people.pop();
    };
};

/**
* The main view model.
*/
function appViewModel() {
    this.people = new peopleModel();
};

// Apply the viewmodel binding.
ko.applyBindings(new appViewModel());