title: knockout js custom bindings
body: <p>i am using the Knockout js custom binding to bind some new div element  inside the div,using class and i am getting data from database,its working only for single data,if the data is more than one,it again getting bind inside the same div like my below code,</p>
  
  <pre><code> //for single data it working 
  &lt;div data-bind="foreach:items"&gt;
    &lt;ul data-role="listview"&gt;
    &lt;li&gt;
       &lt;div databind="BindingImage({img:imageurl})" class="Image"&gt;
          &lt;div id="img1"&gt;&lt;img src=1.png /&gt;&lt;/div&gt;
       &lt;/div&gt;
    &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  //for multiple data it not  working 
  &lt;div data-bind="foreach:items"&gt;
    &lt;ul data-role="listview"&gt;
    &lt;li&gt;
      &lt;div databind="BindingImage({img:imageurl})"class="Image"&gt;
          &lt;div class="imageWrapper" id="img1"&gt;&lt;img src=1.png /&gt;&lt;/div&gt;
          &lt;div clas="imageWrapper" id="img2"&gt;&lt;img src=2.png /&gt;&lt;/div&gt;
     &lt;/div&gt;
          for multiple data its create databind="BindingImage div, but inside the div it does not bind anything, i need to bind image2 in this div but its getting bind on first  div itself,i need to bind first image inside the first BindingImage div and next  one in another BindingImage div where i am doing wrong. 
     &lt;div databind="BindingImage({img:imageurl})"class="Image"&gt;&lt;/div&gt;
    &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  
  //custom binding//
  ko.bindingHandlers.BindingImage = { 
      update: function(element, valueAccessor) {
          id+=1
          var className = element.className;
          imagewrapper= document.createElement('div');
          imagewrapper.className = "imageWrapper";
          imagewrapper.id = "img1"+id
          document.querySelector("." +className).appendChild(imagewrapper)
      }
  };
  </code></pre>