title: All list item popovers for new items showing at once on hover- Javascript
body: <p>So, I have a categorised list of items from a SQL Server database on my page. I also have stars next to the newer items to draw user attention. My code should hopefully display popovers for each of the new items when the user hovers over each of them. My problem is that no matter what new item/star I hover on, they all appear at once. Ive tried using a for loop for each item and giving each <code>&lt;li&gt;</code> a unique class or id in different attempts. This is part of the code looping through the Db and also displaying the "new" </p>
  
  <pre><code>&lt;li&gt;
      &lt;?php 
          if(strtotime($itemDetails['posted']) &gt; (strtotime('-30 days'))){
              echo '&lt;i class="icon-star" data-content="This item is new on Corkboard. Check it out!" data-original-title="New Item"&gt;&lt;/i&gt;';}
              echo '&lt;a href="newGenView.php?id='.$itemid.'"&gt;'.$itemDetails['name'].' - '.$itemDetails['description'].'&lt;/a&gt;';
      ?&gt;
  &lt;/li&gt;
  &lt;?php
      }//foreach
      echo '&lt;/ul&gt;';
      }//foreach
  ?&gt;
  </code></pre>
  
  <p>This is the code instantiating the popover.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      $('.icon-star').popover(options);
  });
  &lt;/script&gt;
  &lt;script&gt;
      $("i").hover(function () {
      $('.icon-star').popover('show');
      });
  &lt;/script&gt;
  </code></pre>