title: slide down animation with dynamic elements
body: <p>i want to build a shopping cart to my website. This page dynamicly displays all the items someone has chosen prior in a list. 
  For every item i want to make a slide down toggle link to display more options for each item</p>
  
  <p>HTML and PHP</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;
    &lt;span id="inquiryCartSlideDown" class="linkArrow"&gt;change order&lt;/span&gt;
  &lt;/p&gt;
  &lt;div id="moreInfoInquiryCart" class="collapse"&gt;
      my div with labels and inputs
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My PHP echos this div as often as the customer has purchased items through a foreach loop. So i get this same div multiple times with the same id. </p>
  
  <p>JS</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>`$(function(){
   $("#inquiryCartSlideDown").click(function(){
       $("#moreInfoInquiryCart").slideToggle("slow");
     });
  });`</code></pre>
  </div>
  </div>
  </p>
  
  <p>This works but only for the first item. The problem is probably that i am using id's. But what should i do instead.</p>