title: button Onclick function with document.getElementById
body: <p>I have created a button using woocommerce for each product, when clicked on it is meant to dropdown a form with its corresponding ID. I'm using woocommerce for displaying the products, and gravity forms for the forms.</p>
  
  <p>I have placed this code html code to create the function for the button :</p>
  
  <pre><code>       &lt;div class="dropdown"&gt;
         &lt;button onclick="myFunction()" class="dropbtn"&gt;SPECIFY PRODUCT&lt;/button&gt;
         &lt;div id="gform_&lt;?php echo get_the_ID(); ?&gt;" class="dropdown-content"&gt;
         &lt;?php gravity_form( 1, false, false, false, '', true ); ?&gt;
         &lt;/div&gt;
         &lt;/div&gt;
  </code></pre>
  
  <p>I also have the script above this html block (as i tried putting in the head section but was giving me a 'null is not an object error' for the document.GetElem...)</p>
  
  <pre><code>       &lt;script&gt;
         var theid = "&lt;?php echo get_the_ID(); ?&gt;";
  
         function myFunction() {
         document.getElementById('gform_' + theid).classList.toggle('show');
         }
         &lt;/script&gt;
  </code></pre>
  
  <p>When i go to click on either of the 3 buttons it only drops down on the 3rd (pulling that ID first and not getting the others).</p>
  
  <p>How can I make all the buttons dropdown and not just one?</p>
  
  <p>Any help would be greatly appreciated as I've been trying to work this out for a while now..</p>
  
  <p>Here is the link: <a href="http://www.ctagroup.com.au/cta-group-home/products/tactile-guidance/suresteel/suresteel-classic/" rel="nofollow">http://www.ctagroup.com.au/cta-group-home/products/tactile-guidance/suresteel/suresteel-classic/</a></p>