Щелкните не работает для наблюдаемого элемента массива

// Example 1: using plain objects
function Person(name, app) {
  const self = {
    name: ko.observable(name),
    remove: () => app.people.remove(self)
  };
  
  return self;
}

// Example 2: using `new`
var App = function() {
  const self = this;
    
  this.firstName = ko.observable(),
  this.people = ko.observableArray(
    [ "Franklin", "Mario" ].map(
      name => Person(name, self)
    )
  );
};

App.prototype.addPerson = function() {
  this.people.push(Person(this.firstName(), this));
  this.firstName("");
};

ko.applyBindings(new App());

<script src = "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "row">
    <div class = "col-md-12">
        <div class = "row">
            <div class = "col-md-6">
                <input type = "text" data-bind = "value: firstName" />
            </div>
            <div class = "col-md-2">

            </div>
        </div>

        <input type = "button" value = "Add People" data-bind = "click: addPerson" />
    </div>
    <div class = "col-md-12" data-bind = "foreach: people">
        <div class = "row">
            <div class = "col-md-6 form-group">
                <label data-bind = "text:name"></label>
                <input class = "form-control" type = "text" data-bind = "textInput: name" />
            </div>
            <div class = "col-md-6 form-group">
                <input type = "button" class = "btn btn-primary" value = "remove" data-bind = "click: remove" />
            </div>
        </div>
    </div>

</div>