title: how to use foreach loops with JQuery
body: <p>i'm trying to show list of data in a table by using smarty templates and foreach loops .. but i want to give an id the ability to show new data below every  .. but it works with the first  only</p>
  
  <p>problem is with the img with id (subjects) i want to show the id (result) each time i click the img .. but it works only with the first line .. how can i make it works with all lines ??</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function(){    
  $('#subjects').click(function(){  
  $('#result').fadeIn(2000);
  });
  });
  &lt;/script&gt;
  
  &lt;br /&gt;&lt;br /&gt;&lt;table width="100%"&gt;
  &lt;tr class="tbl"&gt;
  &lt;td colspan="6"&gt;{$ci-&gt;lang-&gt;line('modules_list')}&lt;/td&gt;
  &lt;/tr&gt;&lt;tr&gt;
  &lt;td class="tbl1" style="width: 8%;"&gt;{$ci-&gt;lang-&gt;line('number')}&lt;/td&gt;
  &lt;td class="tbl2" style="width: 28%;"&gt;{$ci-&gt;lang-&gt;line('title')}&lt;/td&gt;
  &lt;td class="tbl1" style="width: 10%;"&gt;{$ci-&gt;lang-&gt;line('add_subject')}&lt;/td&gt;
  &lt;td class="tbl2" style="width: 10%;"&gt;{$ci-&gt;lang-&gt;line('subjects_list')}&lt;/td&gt;
  &lt;td class="tbl1" style="width: 8%;"&gt;{$ci-&gt;lang-&gt;line('edit')}&lt;/td&gt;
  &lt;td class="tbl2" style="width: 8%;"&gt;{$ci-&gt;lang-&gt;line('delete')}&lt;/td&gt;
  &lt;/tr&gt;
  {foreach $modules_list as $module}
  &lt;tr&gt;
  &lt;td class="tbl1" style="width: 8%;"&gt;{$module.number}&lt;/td&gt;
  &lt;td class="tbl2" style="width: 28%;"&gt;{$module.title}&lt;/td&gt;
  &lt;td class="tbl1" style="width: 10%;"&gt;&lt;a href="{base_url('admincp/subjects/add')} /{$module.id}"&gt;&lt;img src="{base_url('images/icons/add.png')}" /&gt;&lt;/a&gt;&lt;/td&gt;
  &lt;td class="tbl2" style="width: 10%;"&gt;&lt;img id="subjects" src="{base_url('images/icons/list.png')}" /&gt;&lt;/td&gt;
  &lt;td class="tbl1" style="width: 8%;"&gt;&lt;a href="{base_url('admincp/modules/edit')}/{$module.number}"&gt;&lt;img src="{base_url('images/icons/edit.png')}" /&gt;&lt;/a&gt;&lt;/td&gt;
  &lt;td class="tbl2" style="width: 8%;"&gt;&lt;a onclick="return confirm('{$ci-&gt;lang-&gt;line('delete_confirm_msg')}')" href="{base_url('admincp/modules/delete')}/{$module.number}"&gt;&lt;img src="{base_url('images/icons/delete.gif')}" /&gt;&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr id="result" style="display:none"&gt;
  &lt;td&gt;RESULT&lt;/td&gt;
  &lt;/tr&gt;
  {/foreach}
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>==</p>
  
  <p>i've solved this problem , it works now but i have another small problem , i want to use aJax to get some information from another page about each moduke when i show the hidden tr .. i want it to get some data from page (modules/$module_id) .. i know how to use ajax .. but how can i use the variable {$module_id} in javascript code ?? </p>