title: Knockout.js - text input on each row of foreach table, should only edit field on that row
body: <p>I have created a fiddle of the following code <a href="https://jsfiddle.net/tpund74/Lkh581q2/2/" rel="nofollow">here</a>.</p>
  
  <p>I have created a table using a knockout foreach. Each row can be removed by an inline button on that row. Rows can be dynamically added, and a label can be edited in real time by selecting the row then using the textbox.</p>
  
  <p>What I am wanting to do is move that one textbox into multiple textboxes, one on each row that edits that row alone. Help is appreciated.</p>
  
  <p>Viewmodel:</p>
  
  <pre><code>function Model() {
      var self = this;
      this.tasks = ko.observableArray();
      this.container = ko.observableArray();
      this.tid = ko.observable(0);
      this.addTask = function(id, content, content2) {
          var obj = {
              id: ko.observable(id),
              content: ko.observable(content),
              content2: ko.observable(content2),
              selected: ko.observable(false)
          };   
          self.tid(id);
          self.tasks.push(obj);        
      };
      this.addNewTask = function() {
        var obj = {
          id: self.tid() + 1,
          content: "New Task",
          content2: "New Service",
          selected: ko.observable(false)
        }
        self.tid(self.tid() + 1);
        self.tasks.push(obj);
  
      }
      this.selectedIndex = ko.observable(0);
      this.selectTask = function(task) {
          self.selectedIndex(self.tasks.indexOf(task));
      };
      self.removeTask = function(task) {
        self.tasks.remove(task)
      };
  };
  
  var myModel = new Model();
  myModel.addTask(1, "Task 1", "Service 1");
  myModel.addTask(2, "Task 2", "Service 2");
  myModel.addTask(3, "Task 3", "Service 3");
  
  ko.applyBindings(myModel);
  </code></pre>
  
  <p>View:</p>
  
  <pre><code>&lt;div data-bind="foreach: tasks"&gt;
  &lt;table cellpadding="0" cellspacing="0"&gt;
  &lt;tr&gt;
    &lt;td&gt;
    &lt;label class="wrapper" data-bind="text: content, click: $root.selectTask, css: {'selected': $root.selectedIndex() === $index()}" /&gt;
    &lt;/td&gt;
    &lt;td&gt;-&lt;/td&gt;
    &lt;td&gt;
      &lt;span class="wrapper" data-bind="text: content2, click: $root.selectTask, css: {'selected': $root.selectedIndex() === $index()}"&gt;&lt;/span&gt;
    &lt;/td&gt;
    &lt;td&gt; &lt;input type="button" value="remove" data-bind="click: $parent.removeTask"&gt;&lt;/td&gt;
  
  &lt;/tr&gt;
  &lt;/table&gt;    
  &lt;/div&gt;
  &lt;br /&gt;
  Add New Task: &amp;nbsp;&lt;input type="button" value="add" data-bind="click: addNewTask"&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;label&gt;Edit Task:&lt;/label&gt; &lt;input type="text" data-bind="value: tasks()[selectedIndex()].content2, valueUpdate: 'afterkeydown'"&gt;
  </code></pre>