title: jQuery - add a show/hide button to each DIV dynamically
body: <p>I'm trying to learn jQuery... everything is going slow &amp; steady. Not complaining. However I like to challenge myself to do something different whenever that tutorial I'm doing is showing me something.</p>
  
  <p>So this is what I have:</p>
  
  <ul>
  <li>A HTML page with some DIVs.</li>
  <li>I want to dynamically add a SHOW/HIDE button at the end of each DIV.</li>
  <li>If I click that button that DIV above that show/hide button should disappear.</li>
  <li>The HIDE button should become SHOW. If I click it again it should show the DIV again.</li>
  </ul>
  
  <hr>
  
  <p>I know how to add a show/hide button at the end of each div.
  I don't know how to tell each button that the DIV above him should be hidden.</p>
  
  <p>The divs do not have an unique ID so I'm thinking that I should also add an unique ID to each DIV. I want to do this with jQuery.</p>
  
  <p>So I'm thinking that I should do some kind of foreach loop. I should go trough each DIV, add an unique ID, add the unique show/hide button that would tell the exact DIV number to hide/show.</p>
  
  <p>Did I got the logic right? Can anyone show me the exact syntax? I'm not only looking for the right code but also see if I have the right logic.</p>
  
  <p>Thank You</p>