I am trying to duplicate my woocommerce add to cart button so it can be displayed a second time lower down my product page. However, I am using a plugin that alters the add to cart form (multiple option selections) and I need the new add to cart button to submit the options selected as well. I have the following javascript to duplicate the button i need:

( function( $ ) { 'use strict'; $(window).on( 'load', function() { var button = $( $.tcAPI().addToCartButtonSelector ).first(); button.tcClone().addClass( 'custom-add-to-cart-button' )
.on( 'click', function() {
button.trigger( 'click' );} ) .appendTo( $('.my-new-button') ); } ); }( window.jQuery ) );

But I am having issues creating a div with class= "my-new-button" to have appended and replaced with the functionality of the main button.

In the exact place I want the button to appear I have used:

<div class="my-new-button">
    <input type="button"  value="Add To Cart" />
</div> 

With no success of the JS appending the div.

If my script is even proper, how should I structure the div (or other) to display the button I want? I am by no means well versed so I appreciate any advice. Thank you