title: Bootstrap popover for a knockout data-bind list
body: <p>I've been working with knockout and bootstrap popover for a couple of days and I've got an datatable that displays some info using knockout data-binds. </p>
  
  <pre><code>&lt;tbody data-bind="foreach: tehlist()"&gt;
    &lt;tr&gt;
       &lt;td data-bind="text: $data.Category"&gt;&lt;/td&gt;
       &lt;td data-bind="text: $data.Name"&gt;&lt;/td&gt;
       &lt;td&gt;&lt;button type="button" id="tehValue" class="btn btn-default" data-bind="text: $data.Value" style="border:none" onclick="getinfo()"&gt;&lt;/button&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>and when the tehValue is clicked it fires a function that displays a random message:</p>
  
  <pre><code>function getinfo(veh, item) {
      $('#tehValue').popover({
          content: 'Dana' + Math.random(),
          html: true
      });  
  }
  </code></pre>
  
  <p>The problem is that it displays the popup only for the first clicked value but not for the others. </p>
  
  <p>Is there a way to display a different popup for each <code>value</code> of data-bind <code>tehlist</code>? </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I've changed to: </p>
  
  <pre><code>&lt;button type="button" id="tehValue" class="btn btn-default" data-bind="text: $data.Value, click: getinfo" style="border:none"&gt;&lt;/button&gt;&lt;/td&gt;
  </code></pre>
  
  <p>And the function to:</p>
  
  <pre><code>getinfo = function (item, event) {
          $('#tehValue').popover({
              content: 'Dana' + Math.random(),
              html: true
          });
      }
  </code></pre>
  
  <p>I'm still getting the popover only for the first value on click.</p>
  
  <p>Is there a way to display a popover for a button without using the Id but only onclick using the getinfo function?</p>