JQuery click functions attached to each list item
<p>I want three   &lt; li >  appended in the aside area of the body of the HTML  document
     <li> Hey1 </li>
     <li> Hey2 </li>
     <li> Hey3 </li>
and to each of them  attached  a click toggle function so that it can show and hide
an appropriate div in the body of the  HTML.
       
       </p>

<pre><code>   &lt;/aside&gt;
  &lt;div id="id1" &gt; I am the  one &lt;/div&gt;
  &lt;div id="id2" &gt; I am the  second&lt;/div&gt;
  &lt;div id="id3" &gt; I am the  third&lt;/div&gt;
  &lt;/body&gt;
</code></pre>

<p>For example the   &lt; li > Hey1 </li> attached click function will ONLY toggle  the div with the id="id1"
and so on</p>

<p>the code  I have written is </p>

<pre><code>   $(document).ready(function() {   $("div").hide();    
   jQuery.each([1,2,3], function(n,value){ n++; 

    $('aside').append("&lt;li&gt; hey"+value+" &lt;/li&gt;").click(function(){$('#id'+value).toggle()});
    });
    })
</code></pre>

<p>Now the code creates the  &lt; li > 's all right and it attaches to them the click function.
The problem is that  whichever of the  &lt; li > I click 
all three of the &lt; div > s toggle<br>
when   what i  specifically want 
is that when , say 
the &lt; li > Hey1 </li>  is clicked  THEN   ONLY  the area with the 
 &lt; div id="id1" > I am the  one &lt; /div>
 will be shown  and hidden.</p>

<p>I am thankful to any help</p>
