title: knockoutjs make selectable items onclick within foreach
body: <p>I am looping items within a foreach statement. On page load, by default I am selecting the first item (data-bind="css: { selected: $index() == 0 }"):</p>
  
  <pre><code>var viewModel = function(){
   var self = this;
   self.pattern_index = 0;
   self.select = function(data) {
    //handle click
   };
   self.makes = [
    {id:1, name: 'Northwoods Prestige'},
    {id:2, name: 'Forest Bay'},
    {id:3, name: 'Timberland'}
   ];
  };
  var model = new viewModel();
  ko.applyBindings(model);
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;div class='oTitle'&gt;&lt;span class="label label-primary"&gt;Patterns&lt;/span&gt;&lt;/div&gt;
    &lt;div data-bind="foreach: makes"&gt;
        &lt;div data-bind="css: { selected: $index() == 0 }, click: $root.select.bind($data)"&gt;xx &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.selected{background-color:red;}
  </code></pre>
  
  <p>My question is how to make other items selectable, selecting the clicked item (.selected) and removing selectable class from first item</p>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/diegopitt/g57qs9a7/" rel="nofollow">http://jsfiddle.net/diegopitt/g57qs9a7/</a></p>