javascript - Knockout is generating two bindings for single foreach -

I am facing a problem of headache, which has given me two days' solution for this. I hope someone will help me with this, I am using knockout to generate bindings with the Jason Data for HTML markup. However, I am not able to change the CSS of the element because I realized that the element The bar has been generated and the same ID has been specified. Here is the snippet of my code

  & lt; Div id = 'divbinder' data-bind = "foreach: results" & gt; & Lt; Div id = 'rowStyle' class = 'merit div content tabular' & gt; & Lt; Div class = 'eligibilitydivContentLeftCell' style = "float: left;" Data-bind = "text: requirements description" & gt; & Lt; / Div & gt; & Lt; Div class = 'eligibilitydivContentMiddleCell' style = "float: left;" & Gt; & Lt; Span class = 'spanClass' & gt; & Lt; / Span & gt; & Lt; Input class = 'inputRadio' type = 'radio' value: 'true' data-bind = "attry: {checked: ihesack, 'name': $ index ()}" /> & Lt; Span class = 'spanClass' & gt; & Lt; / Span & gt; & Lt; / Div & gt; & Lt; Div class = 'eligibilitydivContentRightCell' style = "float: left;" & Gt; & Lt; Span class = 'spanClass' & gt; & Lt; / Span & gt; & Lt; Input square = 'inputRadio2' type = 'radio' value: 'wrong' data-bind = "atri: {checked: ihesack, 'name': $ index (), onclick: 'testfunction. Apely (this); return True; '} "/> & Lt; Span class = 'spanClass' & gt; & Lt; / Span & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div data-bind = "atri: {'id': getSuffixRowID ($ index ())}" style = "display: none;" & Gt; & Lt; Div style = "float: left;" & Gt; & Lt; Textarea & gt; & Lt; / Text field & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Input type = 'text' id = 'dateField' onfocus = 'showDate ()' /> & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 Here are the JavaScript functions that I am using to generate the ID  
  function getSuffixRowID (suffix) {// alert (suffix); Return 'hidden light' + prefix; }   
 Here's my binding  
  viewModel = []; See model Results = ko.mapping.fromJS (Globalized Data. Results); Ko.cleanNode (document.getElementById ("parentDivElement")); Ko.applyBindings (see model, document.getElementById ("parentDivElement"));   
 Note that the requirements description is correctly tied up. The only problem being probed through CSS, when the button is being checked.  
  function testfunction () {// jQuery ('#' + getSuffixRowID (this.attributes [6] .nodeValue)). Hide (); Var nodeId = this.attributes ['name']. NodeValue; Var stringValue = this.value; Switch (stringValue) {case ('true'): viewModel.Results () [nodeId] .IsCompleted (true); ViewModel.Results () [nodeId] (correct) .IsChecked; break; Cases ('false'): see model Results () [noded]. Successful (false); ViewModel.Results () [nodeId] (wrong) .IsChecked; Var idName = getSuffixRowID (node ​​ID); $ ('#' + IdName) Css ('display', 'block! Important;'); break; }}   
 The check box is assigned to the Elements within the ID of foreach, with $ USD variable. I realized duplicate generation when the HTML page was generated. There are two fake foreach markup in it. Any help would be really appreciated.  
 Thanks   
 
 
 You should code it with Knock OutJs:  
  onclick: 'testfunction.apply (this); Return; '}   
 The result object should have two properties (one for each checkbox). So assume that your result object looks:  
  var result = function () {var self = this; Self.checkbox1 = ko.observable (); Self.checkbox2 = ko.observable (); };   
 The binding checkbox will be:  
  onclick: $ parent: testFunction, value: checkbox2   
 If you want, add id binding.  
 and TestFunction:  
  function testFunction (result / * result items * /) {if (result.checkbox2 ()) {} [...]};   
 You were unable to modify the view directly with the knockout. You will have to take advantage of the View model and Knockout will modify the scene for you.  
 Please also take a look.  
 I hope this will be helpful.