title: Add dynamic element in an array using knockout
body: <p>I am trying to add elements in an observableArray but here I have problem that newly added element replace last elements. </p>
  
  <pre><code>var bugTracker = function() {
    var self = this;
    self.bugName = ko.observable(''),
      self.bugList = ko.observableArray([
        {name:"Abc",age:27},{name:"Dooo",age:27},{name:"Usss",age:27},{name:"Yeess",age:27}
      ])
    self.addBug = function() {
      var newBug = {
        name: self.bugName,
        age: 86
      }
      self.bugList.push({
        name: self.bugName,
        age: 89
      });
    }
    self.removeBug = function() {
      self.bugList.remove(this);
    }
  }
  bugTracker.bugList
  $(function() {
    ko.applyBindings(new bugTracker());
  });
  </code></pre>
  
  <p>HTML: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input type="text" data-bind="value : bugName" &gt;
  &lt;input type="button" data-bind="click: addBug" value="Add Bug"/&gt;
  &lt;ol data-bind="foreach : bugList"&gt;
      &lt;li data-bind="text : name" &gt;
      &lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>Output : </p>
  
  <p><a href="https://i.stack.imgur.com/E1JCh.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E1JCh.jpg" alt="enter image description here"></a></p>