title: Why can't I add an event listener to each of my elements in my array, not just the last one when using knockout js
body: <p>I understand how to add an event listener to all of my elements in my array in vanilla js. But when i use knockout js only the last element in my array is affected.
  I made a function in js file</p>
  
  <pre><code>//when any of the li elements in the ul are clicked run this function
  this.zoomOnLocation = function(){
    //zooms in on the location you clicked
    map.setZoom(18);
    map.setCenter(marker.getPosition());
  }
  </code></pre>
  
  <p>Then I have my ul and li tags that triggers the function when clicked</p>
  
  <pre><code>&lt;ul class="list" data-bind="foreach: locations"&gt;
      &lt;li data-bind="text: title, click: $parent.zoomOnLocation"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>But whenever I click on that li i always get the last location in my locations array. Why is this happening? If you would like to view my project just click <a href="https://enightengale.github.io/neighborhood_map/" rel="nofollow noreferrer">here</a></p>