Button Onclick Function With Document.getElementById

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.

I have placed this code html code to create the function for the button :

       <div class="dropdown">
       <button onclick="myFunction()" class="dropbtn">SPECIFY PRODUCT</button>
       <div id="gform_<?php echo get_the_ID(); ?>" class="dropdown-content">
       <?php gravity_form( 1, false, false, false, '', true ); ?>
       </div>
       </div>

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...)

       <script>
       var theid = "<?php echo get_the_ID(); ?>";

       function myFunction() {
       document.getElementById('gform_' + theid).classList.toggle('show');
       }
       </script>

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).

How can I make all the buttons dropdown and not just one?

Any help would be greatly appreciated as I've been trying to work this out for a while now..

Here is the link: http://www.ctagroup.com.au/cta-group-home/products/tactile-guidance/suresteel/suresteel-classic/

try the code below:

<script>
function myFunction(myid) {
	document.getElementById('gform_' + myid).classList.toggle('show');
}
</script>

<div class="dropdown">
	<button onclick="myFunction(<?php echo get_the_ID(); ?>)" class="dropbtn">SPECIFY PRODUCT</button>
	<div id="gform_<?php echo get_the_ID(); ?>" class="dropdown-content">
		<?php gravity_form( 1, false, false, false, '', true ); ?>
	</div>
</div>