Add Custom Button next to “ADD TO CART” button of WooCommerce

I want add a custom Button next to “Add to Cart” button of WooCommerce.

For example my WooCommerce Products are some of Website Theme, and I want add a custom button “View Demo” next to “Add to Cart” button, so the customer can view the demo page by pressing the button “View Demo” before they decide to press “Add to Cart” button. The Demo page also open in new window.

I’ve tried the following code using “TC Custom JavaScript” plugin:

jQuery(function($) {
 $('.add_to_cart_button, .single_add_to_cart_button').after(' <a class="button demo_button" style="padding-right: 0.75em;padding-left: 0.75em;margin-left: 8px; background-color: #0ebc30;" href="http://pink-demo.akunikah.com/" target="_blank">View Demo</a>');
});

It’s work. These code will creat “View Demo” next to “Add to Cart” button on shop home page and single product page.

The problem is, all of the product have the same View Button Link, so the link of the View Demo button are same on all product.

What I want are each product have its own “View Demo” link. I’ve tried to using ACF Plugin to add custom field for each Theme Product. And my code became like this:

jQuery(function($) {
 $('.add_to_cart_button, .single_add_to_cart_button').after(' <a class="button demo_button" style="padding-right: 0.75em;padding-left: 0.75em;margin-left: 8px; background-color: #0ebc30;" href="<?php the_field('url_demo'); ?>" target="_blank">View Demo</a>');
});

It’s not work. The button “View Demo” disappear and gone.

Anyone can help my problem? How to add a custom “View Demo” button next to “Add to Cart” button, and the “View Demo” button link to different page based on the product demo page define in custom field?