Floating button that opens a lightbox form

I'm pretty new to Squarespace but I've been picking apart code for quite some time.

I'm trying to put a floating button on a single page that will pop a lightbox form.  I actually have it completely working using a collection tag with CSS and Advanced HTML.  I was able to get it working exactly the way that I want by creating a button elsewhere in the page and then copying the code and adding it to the floating button.  However, I end up with the original button AND the floating button on the page.  The problem is that if I delete the original button then the floating form stops working.

I feel like the solution would be to try and completely hide the original form or somehow change the original button to be the floating one.

Any ideas or suggestions are greatly appreciated!

Thank you!

Can you provide some more information to help us understand the issue? It will be difficult for the community to make suggestions if we can't see the site, and don't know the code that you've used. If the site isn't live, the URL will only help if you set a password in the visibility settings and tell us what it is.
 

Thanks for replying, Paul.  The temp page that I have up for testing is https://www.ww2matchmaker.com/test-request-to-buy.

The fixed button and the floating button both work as intended.  But, if I delete the fixed button, the floating ones stops working also.  I guess this make sense as the fixed object is the code that is being used for the floating object. 

Maybe there is a better way to accomplish my objective(float with lightbox pop) but I'm not seeing it.

Thanks!

Yes, exactly. You are literally copying the Squarespace button code from one area of the page and injected it again on the same page. That's not something that I'd recommend, as you now have duplicate IDs. You could fuge it by removing the duplicate ID and hiding the original button with some CSS but it's not something I'd recommend on a live site.

Typically a developer would use JavaScript to relocate the button and, if required, encapsulate it in a new div so that you can apply the CSS as you have in your test. Moving it means that there won't be duplicates of elements or IDs.

I see what you are saying.  That pointed me towards another tactic, which seems to be working.

I deleted all the Advanced HTML to remove the duplicate button.  Then I targeted the original button block with Custom CSS, which moved it right into the same floating position that the deleted button was in. 

Now I just need to find a way to keep the floater between the banner and footer.

Thanks!