title: using durandal compose to add a view and creating multiple clones of that div, data binding is not working
body: <p>i am using durandal compose to add a div to my page that i need to create clones of according to elements of select list,
  I got the div i want to to show multiple instances of in a seperate html file and called it with :</p>
  <pre><code>  &lt;div id=&quot;QFieldsId&quot; data-bind=&quot;compose:{ view:'shared/quot' }&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>this is showing the original div perfectly where is should be, note that this div uses binding from an .JS file for getting elements inside it , like this :</p>
  <pre><code> &lt;div class=&quot;form-group col-md-3&quot; data-bind=&quot;validationElement: CCommission,visible: CCommissionVisible()&quot;&gt;
  &lt;label for=&quot;CCommission&quot; class=&quot;control-label required&quot;&gt;CCommission&lt;/label&gt;
  &lt;span class=&quot;form-control &quot;
  data-bind=&quot;visible: !editingCCommission(), text: global.formatAsDecimal(CCommission(),CCommissionDecimal()), click: editCCommission&quot;&gt;&lt;/span&gt;
  &lt;input type=&quot;number&quot; class=&quot;form-control &quot;
  data-bind=&quot;visible: editingCCommission, value: CCommission hasFocus: editingCCommission&quot; /&gt;
  &lt;/div&gt;
  </code></pre>
  <p>the field that is shown by the durandal compose is binded perfectly , but then i am using this in the javascript file to create clones according to the number of elements in a selectlist :</p>
  <pre><code>var qfieldId = 0;
   $(&quot;#IBList option&quot;).each(function () {
  qfieldId ++;
  var select = document.getElementById(&quot;quoteId&quot;);
  var clone = select.cloneNode(true);
  clone.setAttribute(&quot;id&quot;, &quot;quoteId&quot; + qfieldId);
  document.getElementById(&quot;QFieldsId&quot;).appendChild(clone);
  }); 
  </code></pre>
  <p>I used the qfieldId to have different Ids on the clones for later on to get the data inserted in them,
  and here is where my problems start! the clones were created of the original div but some of the fields like the one i stated before are not accessible for editing.. my guess is that the problem is with the data binding of the <code>editingCCommission()</code> but i am not sure of this. the field create for editing to insert the data , in the JS file they are created like this :</p>
  <pre><code>self.editingCCommission = ko.observable(false);
  self.editCCommission = function () { return self.editingCCommission(true) };
  </code></pre>
  <p>i thought perhaps the problem is with the editCCommission always being false not true in the clones. i still couldn't wrap my head around it so tell me if anyone has an idea about this please. thank you!</p>