title: Slide Panel on Dynamically Created Images
body: <p>I have a a slide down working on an image.  In the fiddle below it is just a div but this is replaced by an image in real case.  Please see working example:</p>
  
  <p>Now, the issue I have is that if I have more than one image then this is looped:</p>
  
  <pre><code>&lt;div class='wrap'&gt;
    &lt;div class="clickable_div"&gt;&lt;/div&gt;
    &lt;div class="nav_menu"&gt;
          &lt;ul&gt;
              &lt;li id="l1"&gt;&lt;strong&gt;Client Name&lt;/strong&gt;&lt;/li&gt;
              &lt;li&gt;Company Name&lt;/li&gt;
              &lt;li&gt;Job Title&lt;/li&gt;
          &lt;/ul&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>$(window).load(function(){
  $('.clickable_div').mouseover( function(){
  $('.nav_menu').slideDown();
  })
  $('.wrap').mouseleave( function(){
  $('.nav_menu').slideUp();
  });
  
   });//]]&gt; 
  
  
  $('.clickable_div').mouseover( function(){
  $('.nav_menu').slideDown();
  })
  $('.wrap').mouseleave( function(){
  $('.nav_menu').slideUp();
  });
  </code></pre>
  
  <p>This is what this achieves and it works well for 1 image: <a href="https://jsfiddle.net/r70nbL8t/1/" rel="nofollow">https://jsfiddle.net/r70nbL8t/1/</a></p>
  
  <p>The issue I am facing is that say for example 5 images are in a row.  I hover over one of them then then they all slide down.  I need to attach a number for example to make them unique, the php code I am using is to loop is:</p>
  
  <pre><code>&lt;table cellspacing="5"&gt;
  &lt;?php
  $sessionTrainers = mysqli_query($con,"SELECT *** Criteria Here");
  $m = 0; // Start Counter
  $n = 4; // Each Nth iteration would be a new table row
  while($attendees = mysqli_fetch_array($sessionTrainers))
  {
  
  if($m % $n == 0 &amp;&amp; $m != 0)
  {
  // New table row
  echo '&lt;/tr&gt;&lt;tr&gt;';
  }
  $m++;
  ?&gt;
  
      &lt;td style="padding:5px;" align="center"&gt;
      &lt;div class='wrap'&gt;
      &lt;div class="clickable_div"&gt;
      &lt;img style="border:8px solid #3ED300;" height="150px" src="#" /&gt;
      &lt;/div&gt;
  
      &lt;div class="nav_menu"&gt;
          &lt;ul&gt;
              &lt;li id="l1"&gt;&lt;strong&gt;&lt;? echo $attendees['NAME']; ?&gt; &lt;? echo $attendees['LAST_NAME']; ?&gt;&lt;/strong&gt;&lt;/li&gt;
              &lt;li&gt;&lt;? echo $companyName ?&gt;&lt;/li&gt;
              &lt;li&gt;&lt;? echo $attendeeJobTitle ?&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;&lt;/div&gt;&lt;br /&gt;&lt;/td&gt;
  &lt;?
  }
  ?&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>So what this basically does is add an image into a td until there is 4 in a row and then starts a new row and continues. Now how do I dynamically get the script to work on images when one is hovered over, only that one slide?</p>
  
  <p>Your help would be appreciated.</p>