button Onclick function with document.getElementById
<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>