knockout.js - Adding items from one observable array to another results in unremovable items on postback -

i've got jsfiddle illustrate i'm experiencing in application code. (i'll post actual fiddle code below, posterity.)

essentially, i've got 1 observable array that's being used populate list of checkbox options. selecting 1 of options adds item observable array composed of selected items.

if there's error in form (or suppose if editing existing data), selected observable array populated start selected items. however, now, there no connection between original items , selected items, checking or unchecking 1 of checkboxes adds duplicate , removes duplicate.

my question 1) going wrong (i.e. there better way won't cause problem) , 2) if not, what's best way restore connection between items, checkboxes indicate items there , unchecking them remove item?

html

<ul data-bind="foreach: fruit">     <li>         <label>             <input type="checkbox" class="cbfruit" data-bind="checked: selected, attr: { value: name }" />             <span data-bind="text: name"></span>         </label>     </li> </ul>  <ul data-bind="foreach: selectedfruit">     <li data-bind="text: name"></li> </ul> 

js

var fruitviewmodel = function (name) {     var self = this;      self.name = ko.observable(name);     self.selected = ko.observable(false);      return self; };  var grocerystoreviewmodel = function () {     var self = this;      self.fruit = ko.observablearray([         new fruitviewmodel('apples'),         new fruitviewmodel('oranges'),         new fruitviewmodel('bananas'),         new fruitviewmodel('pineapples')     ]);      self.selectedfruit = ko.observablearray([         new fruitviewmodel('oranges'),         new fruitviewmodel('bananas')     ]);      return self; };  $(document).ready(function () {     var viewmodel = grocerystoreviewmodel();     ko.applybindings(viewmodel);      $('.cbfruit').on('click', function () {         var fruit = ko.datafor(this);         if (fruit.selected()) {             viewmodel.selectedfruit.push(fruit);         } else {             viewmodel.selectedfruit.remove(fruit);         }     }); }); 

i solved issue throwing away separate observable array (and separate posted list). instead, i'm using same full list both foreach uses , in second one, using knockout virtual if element, have show selected ones:

html

<ul data-bind="foreach: fruit">     <li>         <label>             <input type="checkbox" class="cbfruit" data-bind="checked: selected, attr: { value: name }" />             <span data-bind="text: name"></span>         </label>     </li> </ul>  <ul data-bind="foreach: fruit">     <!-- ko if: selected -->     <li data-bind="text: name"></li>     <!-- /ko --> </ul> 

the data second list posts first, have little clean-up server-side make sure content-only values (name of fruit, etc) come if view shown again.