title: Passing a variable into a javascript function in PHP to make specific divs hide or show?
body: <p>I am trying to create a simple FAQ page where the user clicks the question and the answer appears below it (or hides it, if clicked again).</p>
  <p>I got it working up to a point where all the questions will show the answer labeled &quot;ans1&quot;. But I would like to pass a variable from each question into the function so it makes the associated answer appear. Question 1 will show Answer 1, Question 2 -&gt; Answer 2, and so on.</p>
  <p>My function...</p>
  <pre><code>function theAnswer() {
      var x = document.getElementById(&quot;ans1&quot;);
      if (x.style.display === &quot;none&quot;) {
          x.style.display = &quot;block&quot;;
      } else {
          x.style.display = &quot;none&quot;;
      }
  }
  </code></pre>
  <p>PHP...</p>
  <pre><code>&lt;?php 
  $answer = 1;
  foreach($faqArray as $faq) {
      ?&gt;
      &lt;div class='product_container'&gt;
          &lt;div class='product_cell'&gt;
              &lt;a onclick=&quot;theAnswer()&quot; href='#'&gt;
              &lt;?php echo $faq[0];?&gt; 
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;answer&quot; id=&quot;ans&lt;?php echo $answer;?&gt;&quot; style=&quot;display:none;&quot;&gt;
          &lt;p&gt;&lt;?php echo $faq[1];?&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;?php 
      $answer = $answer + 1;
  } ?&gt;
  </code></pre>
  <p>If I put a variable in the onclick=&quot;theAnswer()&quot; that dictates the associated div, how can I get the function to perform the desired result?</p>
  <p><a href="https://i.stack.imgur.com/nV5X6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nV5X6.png" alt="enter image description here" /></a></p>
  <p>Thanks!</p>