title: Change CSS attribute with several Buttons Javascript
body: <p>I have an FAQ project in which it has several question that can be answered when the users clicks the arrow button on each questions line. I am using javascript to change the css element but it only works with the firts arrow on not the rest.</p>
  <p>I want to be able to click any arrow to show each answer. I was thinking add an differnt ID to each arrow per line but that may not be the best approach.</p>
  <p>HTML</p>
  <pre><code>&lt;article class=&quot;questions&quot;&gt;
              How many team members can I invite?
              &lt;img src=&quot;images/icon-arrow-down.svg&quot; alt=&quot;arrow&quot; class=&quot;arrow&quot; id=&quot;down-arrow&quot;&gt;
              &lt;hr&gt;
              &lt;detail id=&quot;answer&quot;&gt;
                You can invite up to 2 additional users on the Free plan. There is no limit on 
                team members for the Premium plan.
              &lt;/detail&gt;
            &lt;/article&gt;  
  
            &lt;article class=&quot;questions&quot;&gt;
              What is the maximum file upload size?
              &lt;img src=&quot;images/icon-arrow-down.svg&quot; alt=&quot;arrow&quot; class=&quot;arrow&quot; id=&quot;down-arrow&quot;&gt;
              &lt;hr&gt;
              &lt;detail id=&quot;answer&quot;&gt;
                No more than 2GB. All files in your account must fit your allotted storage space.
              &lt;/detail&gt;
            &lt;/article&gt;  
  
            &lt;article class=&quot;questions&quot;&gt;
              How do I reset my password?
              &lt;img src=&quot;images/icon-arrow-down.svg&quot; alt=&quot;arrow&quot; class=&quot;arrow&quot; id=&quot;down-arrow&quot;&gt;
              &lt;hr&gt;
              &lt;detail id=&quot;answer&quot;&gt;
                Click “Forgot password” from the login page or “Change password” from your profile page.
                A reset link will be emailed to you.
              &lt;/detail&gt;
            &lt;/article&gt; 
  
            &lt;article class=&quot;questions&quot;&gt;
              Can I cancel my subscription?
              &lt;img src=&quot;images/icon-arrow-down.svg&quot; alt=&quot;arrow&quot; class=&quot;arrow&quot; id=&quot;down-arrow&quot;&gt;
              &lt;hr&gt;
              &lt;detail id=&quot;answer&quot;&gt;
                Yes! Send us a message and we’ll process your request no questions asked.
              &lt;/detail&gt;
            &lt;/article&gt;
  
            &lt;article class=&quot;questions&quot;&gt;
              Do you provide additional support?
              &lt;img src=&quot;images/icon-arrow-down.svg&quot; alt=&quot;arrow&quot; class=&quot;arrow&quot; id=&quot;down-arrow&quot;&gt;
              &lt;hr&gt;
              &lt;detail id=&quot;answer&quot;&gt;
                Chat and email support is available 24/7. Phone lines are open during normal business hours.
              &lt;/detail&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>#answer{
     display: none; 
  }
  </code></pre>
  <p>Javascript</p>
  <pre><code>document.getElementById('down-arrow').addEventListener(&quot;click&quot;, toggleAnswers);
  const arrow = document.getElementById('down-arrow')
  const current = document.getElementById(&quot;answer&quot;);
  function toggleAnswers(){
      current.style.display = &quot;inline&quot;;
      arrow.style.transform = &quot;scaleY(-1)&quot;;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/bMDkD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bMDkD.png" alt="FAQ List" /></a></p>