knockout.js - Unable to bind values after inserting table rows with jquery -

i have in html:

<table class="datatable" id="cadatatable"> <thead>     <tr>         <th> type</th>         <th> name</th>         <th> adress</th>         <th> id number</th>         <th> contact</th>         <th> note</th>     </tr>    </thead> <tbody>     <tr>         <td>             <select name="catype" id="catype" data-bind="value: catype" style="width: 12em;">                                <option>1</option>                  <option>2</option>                   <option>3</option>                   <option>4</option>                   </select>         </td>        <!--         <td><input type="text" name="catype" data-bind="value: catype" style="width: 9em;"></td> -->         <td><input type="text" name="caname" data-bind="value: caname" style="width: 15em;"></td>         <td><input type="text" name="caadress" data-bind="value: caadress" style="width: 15em;"></td>         <td><input type="text" name="caidnum" data-bind="value: caidnum" style="width: 6em;"></td>         <td><input type="text" name="cacontact" data-bind="value: cacontact" style="width: 10em;"></td>         <td><input type="text" name="canote" data-bind="value: canote" style="width: 15em;"></td>     </tr> </tbody> </table> <button type="button" id="export" class="button" data-bind="click: newcreditrows">add new row</button> 

and jquery code inside of knockout js view model, witch executed when button pressed:

var clickadd = 0;                         newcreditrows = function(){                             clickadd++;                             if(clickadd<=9){                                 $('#cadatatable tr:last').after('<tr><td><select name="catype' +clickadd+ '" id="catype' +clickadd+ '" data-bind="value: catype' +clickadd+ '" style="width: 12em;"><option>Съдлъжник</option> <option>Поръчител</option>   <option>3то Лице</option>   <option>ипотекарни / заложни длъжници</option>      </select></td><td><input type="text" name="caname' +clickadd+ '" data-bind="value: caname' +clickadd+                                    '" style="width: 15em;"></td><td><input type="text" name="caadress' +clickadd+ '" data-bind="value: caadress' +clickadd+                                    ' " style="width: 15em;"></td><td><input type="text" name="caidnum' +clickadd+ ' " data-bind="value: caidnum' +clickadd+                                    '" style="width: 6em;"></td><td><input type="text" name="cacontact' +clickadd+ '" data-bind="value: cacontact' +clickadd+                                    ' "style="width: 10em;"></td><td><input type="text" name="canote' +clickadd+ '" data-bind="value: canote' +clickadd+ '" style="width: 15em;"></td></tr>');                                                         }else                                 alert("maximum number reached!");                             }; 

everything working fine, noticed new rows added jquery code can not bind value ko.observable() variables (i have declared correctly in viewmodel, i'm not posting because code become huge.)

i mean observable caadress1 witch declared in code: '" data-bind="value: caadress' +clickadd not working.

i'm sure i'm missing small char escaping, i'm still new in jquery , knockout, i'm not able spot it.

you injecting html dom after called applybindings method. ko not aware of new elements.

take @ this fiddle

var ca = function() {     this.caname = null;     this.caadress= null;     this.caidnum = null;     this.cacontact = null;     this.caname = null;     this.canote= null;     this.catype = null; };  var vm = {     newcreditrows : function () {          this.creditrows.push(new ca());     },     creditrows : ko.observablearray() };   ko.applybindings(vm); 

i hope helps.