title: PHP and Javascript. Code optimization
body: <p>I would like some help to optimize my code.</p>
  
  <p>I have a product list.</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;a href="#" id="item1"&gt; Item 1 &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#" id="item2"&gt; Item 2 &lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>For every item I have a section with the item's details.</p>
  
  <pre><code>&lt;div id="item1-details"&gt; Item Details 1 &lt;/div&gt;
  &lt;div id="item2-details"&gt; Item Details 2 &lt;/div&gt;
  </code></pre>
  
  <p>These sections are hidden. 
  They only appear when the user clicks on the item listed above.</p>
  
  <pre><code>$("#item1").click(function() { $("#item1-details").show(); });
  $("#item2").click(function() { $("#item2-details").show(); });
  </code></pre>
  
  <p>Up to this point I have no problems. The logic is very basic.
  The problem comes when the information is retrieved from the database.</p>
  
  <p><b>When the user clicks on an item, how do I pass the ID of the related detail's section to the jQuery function?</b></p>
  
  <p>I have two <b>foreach</b> blocks. One to populate the - ul - list and another to create the detail's sections. I can use the item ID to make unique the link and use the same ID adding a character to make unique the details section. But how can I create this automatism with jQuery. </p>
  
  <p>I hope I was clear, even with my English. 
  Thank you all.</p>