title: Add row to table using knockout
body: <p>I'm fairly new to Knockout and JavaScript in general, I am trying to figure out how to get this working I am trying to create a simple shopping list application using knockout.js I have it currently where it's adding the Item Name and quantity to the table however it's adding them both as separate rows instead of row and column. </p>
  
  <p><a href="https://i.imgur.com/OJPmbe4.png" rel="nofollow noreferrer">HTML Table issue</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var SimpleListModel = function(items) {
    self = this;
    self.items = ko.observableArray(items);
  
    self.itemToAdd = ko.observable("");
    self.quantityToAdd = ko.observable("");
  
    self.deleteItem = function(item) {
      self.items.remove(item);
      return self.items;
    }
  
    self.addItem = function() {
      if (self.itemToAdd() != "") {
        self.items.push(self.itemToAdd());
        self.itemToAdd("");
      }
      if (self.quantityToAdd() != "") {
        self.items.push(self.quantityToAdd());
        self.quantityToAdd("");
      }
    }.bind(this);
  };
  
  ko.applyBindings(new SimpleListModel());</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"&gt;&lt;/script&gt;
  &lt;form data-bind="submit: addItem"&gt;
    New item:&lt;input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' /&gt; Quantity:
    &lt;input data-bind='value: quantityToAdd, valueUpdate: "afterkeydown"' /&gt;
    &lt;button type="submit" data-bind="enable: itemToAdd().length &gt; 0"&gt;Add&lt;/button&gt;
  &lt;/form&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;table border="1"&gt;
    &lt;thead&gt;
      &lt;th&gt;Item&lt;/th&gt;
      &lt;th&gt;Quantity&lt;/th&gt;
      &lt;th&gt;Remove&lt;/th&gt;
    &lt;/thead&gt;
    &lt;tbody data-bind="foreach:items"&gt;
      &lt;tr&gt;
        &lt;td data-bind="text: $data"&gt;&lt;/td&gt;
        &lt;td&gt;&lt;input type="button" data-bind="click:$root.deleteItem" value="X"&gt;&lt;/input&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>the expected result needs to be:</p>
  
  <p><a href="https://i.stack.imgur.com/uAt0B.png" rel="nofollow noreferrer">Expected result image</a></p>