Javascript command pattern example. Put this in your fiddle, code pen or other online editor and run it. Supports undo and redo.

command.css

body {
  font-family: 'Helvetica', 'Arial', 'Sans Serif';
}

pre {
  background-color: #ddd;
  padding: 4px;
}

code {
  font-family: "Consolas", "Georgia";
}

.input-group {
  padding: 4px;
  margin: 4px;
}

.input-group label {
  display: block;
}

.right {
  float: right;
}

command.html

<h1>Person Document</h1>
<pre><code id="out"></code></pre>

<div class="right" id="stack"></div>

<div class="input-group">
  <label>First Name</label>
  <input type="text" id="firstNameInput">
  <button id="firstNameButton">+</button>
</div>

<div class="input-group">
  <label>Last Name</label>
  <input type="text" id="lastNameInput">
  <button id="lastNameButton">+</button>
</div>


<div class="input-group">
  <label>Age</label>
  <input type="number" id="ageInput">
  <button id="ageButton">+</button>
</div>

<div class="input-group">
  <button id="undoButton">Undo</button>
  <button id="redoButton">Redo</button>
</div>

command.js

const Editor = { // caller
  stack: [],
  undos: [],

  call(command) {
    this.stack.push(command)
    command.execute()
    return this
  },

  undo() {
    const command = this.stack.pop()
    console.log(command)
    if (!command) return this
    this.undos.push(command)
    command.undo()
    return this
  },

  redo() {
    const command = this.undos.pop()
    if (!command) return this
    this.call(command)
    return this
  }
}

$(document).ready(() => {
  const person = {
    firstName: null,
    lastName: null,
    age: null
  }

  const createCommand = ({ target, old, value }) => ({
    execute() {
      person[target] = value
    },
    undo() {
      person[target] = old
    },
    info() {
      return {target, old, value}
    }
  })

  const eventHandler = (target) => {
    $(`#${target}Button`).on('click', function(event) {
      const command = createCommand({
    	  target: target,
        old: person[target],
        value: $(`#${target}Input`).val()
      })
      Editor.call(command)
      render()
      $(`#${target}Input`).val(null)
    })
  }

  const render = () => {
  	$('#out').text(JSON.stringify(person, null, 2))
    const stack = $('#stack')
    const ul = $('<ul></ul>')
    Editor.stack.forEach(command => ul.append(`<li>${command.info().target}</li>`))
    stack.html(ul)
  }
  
  eventHandler('firstName')
  eventHandler('lastName')
  eventHandler('age')
  
  $('#undoButton').on('click', () => Editor.undo() && render())
  $('#redoButton').on('click', () => Editor.redo() && render())

  render()
})