Avatar of E C
E C
Flag for United States of America

asked on 

jquery to copy an element on the page

I use a hosted e-commerce solution to sell products online.  The site is pre-designed with a button that fires a JavaScript event. I'm fine with this button and the way it works.

At the bottom of each product page, there is an editable region where I can insert my own content (including code).

In this section of the page, I want a COPY of the button to appear. So I view the source code, copy this block of code:

<span style="margin-left:30px;"><a id="ctl00_content_CtlAddToCart_x12" class="pbtn btn-s btn-s-green ButtonRefreshPreview" onclick="return PreviewSubmitCrossPost(23152,295);" href="javascript:void(0);"><span><span class="pbtn-icon img-refresh"></span>Generate Proof</span></a></span>

... and paste it into the editable content region at the bottom of the page.
Doing this creates a second copy of the button.
It works fine.

The problem is, since this block of code calls a function, and the parameter of the function is the Product ID, and the product ID is different for every product ... I can't simply copy/paste this same block of code into every product page.  

Instead I have to paste the code. Then view the source code, grab the product ID, then go back into my copy and update the parameter. Because the ID is unique for each product, I have to manage these codes manually.

Using jQuery, is there a way that I can just say "Find the button on this page and make a copy of it here"?

This way I am copying/pasting the same block of code for every product, and it automatically grabs the product ID without me having to manually update it?
jQuery

Avatar of undefined
Last Comment
E C

8/22/2022 - Mon