title: Show or hide divs while in a loop
body: <p>I would like to show or hide a div when the client clicks a link.</p>
  
  <p>The problem is at the moment the page content <code>divs</code> are being generated via a loop.</p>
  
  <p>I'm generating a unique id for the link by pulling it from the database and assigning the <code>checkId</code> function to run with the <code>onclick</code> event.</p>
  
  <pre><code>&lt;div class="anchor"&gt;
      &lt;a id="&lt;%= order._id %&gt;" onclick="checkId(this.id, 'moreContent');" class="button"&gt;VIEW MORE&lt;/a&gt;
  &lt;/div&gt; 
  
  &lt;div class="moreContent"&gt;
      &lt;h1&gt;THIS WILL BE THE DIV TO SHOW OR HIDE&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>checkId()</code> function is able to log out the correct link id.</p>
  
  <p>Inside the <code>checkId()</code> function, I'm assigning the moreContent div ID's
  dynamically.</p>
  
  <pre><code>function checkId(anchorID, showDIV) {
      var anchorID = document.getElementById(anchorID);
      var showDIV = document.getElementsByClassName(showDIV);
      for (var i = 0; i &lt; showDIV.length; i++) {
        showDIV[i].id = "show" + (i + 1);
        console.log(showDIV);
        console.log(anchorID.id);
    }
  }
  </code></pre>
  
  <p>When I log moreContent ids, I can see they are all unique and incrementing properly but basically at this point I'm at a loss. </p>
  
  <p>What do I need to look into to <strong>grab the moreContent id and relate it to the original link id</strong> or if it's even possible with this approach. </p>
  
  <p>Any help would be appreciated. Thanks!</p>