knockout.js - Knockout with SharePoint 2013 makes permanent changes to my DOM -

i extremely new sharepoint, have experience knockout. i've set page runs of code fine. @ page in browser , things great. when go edit page, fine, when i'm done editing, of knockout foreach bindings have multiplied , have lot more elements on page. if sit on edit page page, after while knockout bindings reevaluated , can watch new elements added page. in addition, if go sharepoint designer , @ code page, of elements in code.

the code in content editor web part follows:

<div id="vcmcontainer">     <div id="contenthead" data-bind="foreach: processes">         <div class="column process">             <div class="header">                 <!-- ko if: $index() > 0 -->                 <div class="divider"></div>                 <!-- /ko -->                 <span data-bind="text: name"></span>             </div>         </div>                   </div>     <div id="contentbody" data-bind="foreach: processes">         <div class="column">             <div class="contenttypes" data-bind="foreach: contenttypes">                 <div class="contenttype">                     <span data-bind="text: contenttype"></span>                 </div>             </div>         </div>     </div> </div>  <script src="/siteassets/scripts/jquery-2.1.1.min.js"></script>  <script src="/siteassets/scripts/knockout-3.1.0.js"></script>  <script src="/siteassets/scripts/ko.sp-1.0.min.ex.js"></script>  <script src="/siteassets/scripts/script.js"></script> 

here css:

#vcmcontainer{     background-color: #0099cc;     color: white;     width: 100%;     height:auto; }  #contenthead{     border-bottom: 2px solid white; }  #contentbody .column {     border-left: 2px solid white; }            #contentbody .column:first-child {     border-left: none; }  .column{     width: 8%;     display:table-cell;     vertical-align:top; }  .process{     text-align:center;     vertical-align:middle;     font-weight: bold;     line-height:50px;     height:50px; }  .divider{     min-width: 20px; /*change later when images swapped out*/     width: 7%;     height:50px;     background:url("http://www.tomnod.com/nod/img/icon-chevron-big-right.png");     background-repeat: no-repeat;     background-position: -5px;     background-size: 28px 66px;     float: left; }  .contenttype {     padding: 5px;     margin-left: 5px;     margin-right: 5px;     margin-top: 5px;     margin-bottom: 20px; } .contenttype:hover {     background-color: #1fb2e4;     cursor: pointer;         } 

and here script.js:

function viewmodel() {     var self = this;      self.processes = ko.observablearray([         { name: ko.observable("scheduling requests"),            contenttypes: ko.observablearray([                 { contenttype: ko.observable("test requirement documents") },                 { contenttype: ko.observable("flight test services request") },                 { contenttype: ko.observable("schedules") }           ])         },         { name: ko.observable("planning"),           contenttypes: ko.observablearray([                 { contenttype: ko.observable("plans") },                 { contenttype: ko.observable("data analysis methods") },                 { contenttype: ko.observable("first flight readiness review") },                 { contenttype: ko.observable("test point tables") },                 { contenttype: ko.observable("plans") },                 { contenttype: ko.observable("data analysis methods") },                 { contenttype: ko.observable("first flight readiness review") },                 { contenttype: ko.observable("test point tables") }           ])         },         { name: ko.observable("configuration control"),           contenttypes: ko.observablearray([                 { contenttype: ko.observable("plans") },                 { contenttype: ko.observable("data analysis methods") },                 { contenttype: ko.observable("test point tables") },                 { contenttype: ko.observable("safety review boards") }           ])         },         { name: ko.observable("airplane modification"),           contenttypes: ko.observablearray([                 { contenttype: ko.observable("plans") },                 { contenttype: ko.observable("data analysis methods") },                 { contenttype: ko.observable("first flight readiness review") },                 { contenttype: ko.observable("first flight readiness review") },                 { contenttype: ko.observable("test point tables") },                 { contenttype: ko.observable("safety review boards") }           ])         },         { name: ko.observable("test execution"),           contenttypes: ko.observablearray([                 { contenttype: ko.observable("plans") },                 { contenttype: ko.observable("data analysis methods") },                 { contenttype: ko.observable("first flight readiness review") },                 { contenttype: ko.observable("test point tables") },                 { contenttype: ko.observable("safety review boards") }           ])         },         { name: ko.observable("tracking"),           contenttypes: ko.observablearray([                 { contenttype: ko.observable("data analysis methods") },                 { contenttype: ko.observable("first flight readiness review") },                 { contenttype: ko.observable("test point tables") },                 { contenttype: ko.observable("safety review boards") }           ])         },         { name: ko.observable("analysis reporting"),           contenttypes: ko.observablearray([                 { contenttype: ko.observable("plans") },                 { contenttype: ko.observable("safety review boards") }           ])         }     ]); }  $(function(){     var vm = new viewmodel();     ko.applybindings(vm); });  

i've looked around , have found no 1 else similar situation. in fact, every tutorial i've found has knockout set , used in exact way i'm used using. did find 1 library called kosp (knockout sharepoint) special sharepoint bindings, other tutorials seem getting without it. appreciated.