title: How do I apply the same logic to multiple repeated elements?
body: <p>I am trying to add the same drop down functionality to an amount n of "cards". How could I do this in javascript without having to create new code for each card?
  This is my current code that I have tried, but even if I got this working it would only work for the first card: (working example below)</p>
  
  <p>my html:</p>
  
  <pre><code>&lt;div class="ideanode"&gt;
                          &lt;div class="ideanodeheader"&gt;Need&lt;/div&gt;
                          &lt;div class="content"&gt;
  
                              &lt;div class="title"&gt;
                                  &lt;h3 contenteditable="True" onclick='this.focus();'&gt;Title&lt;/h3&gt;
                              &lt;/div&gt;
                              &lt;i class="fas fa-sort-down title-arrow"&gt;&lt;/i&gt;
                              &lt;div class="maintext"&gt;
                                  &lt;textarea placeholder="Text" class="maintextinput"&gt;&lt;/textarea&gt;
                              &lt;/div&gt;
                              &lt;i class="fas fa-sort-down maintxt-arrow"&gt;&lt;/i&gt;
                              &lt;div class="comments"&gt;
                                  &lt;textarea placeholder="Comments" class="commentsinput"&gt;&lt;/textarea&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>var maintxt = document.querySelector(".maintext");
  var title = document.querySelector(".title");
  var titleArrow = document.querySelector(".title-arrow");
  var mainArrow = document.querySelector(".maintxt-arrow");
  var comments = document.querySelector(".comments");
  var mainArrows = document.querySelectorAll(".maintxt-arrow")
  
  titleArrow.addEventListener('click', function() {
      maintxt.classList.toggle("hidden");
      mainArrow.classList.toggle("hidden");
      if (comments.classList.contains("hidden")){
          ;
      } else {
      comments.classList.toggle("hidden");    
      };
  });
  
  mainArrow.addEventListener("click", function() {
      comments.classList.toggle("hidden");
  });
  </code></pre>
  
  <p>Example: <a href="https://codepen.io/ricodon1000/pen/Baoxwed" rel="nofollow noreferrer">https://codepen.io/ricodon1000/pen/Baoxwed</a>
  I would  like for the dropdown arrows to trigger the boxes below them, the upper arrow should trigger only the box below it on, but if both boxes are open both should be closed. The arrow that is below should only trigger the box directly below it on and off (display: none on and off).</p>