For those interested, I have developed a work-around solution. Making an event that says "componentNameClickInvoke serviceserviceName" automatically updates when the page is duplicated and it appends a "clone#" to the end of the original service name. My problem was that I needed to invoke the service within JavaScript code (I needed to do a check using an if else statement before invoking the service) and that, of course, does not auto-update, making the code useless unless I go into the code for every duplication and append a "clone#" to the end every time, manually. So I began to guess and check using the test function and this is what I came up with:
Set up a component, any component, whether it be a button, a toggle, or even an input field. Name it what you please and/or add any text you want, just uncheck the "visible" checkbox in the end, so that users don't see what is going on. Open the "Events" tab and make a new event: componentNameVirtual clickInvoke serviceserviceName.
Then, instead of invoking the service in code by using the execute command as you would normally:
codeserviceName.execute({});/code
Use the ".trigger()" event handler (I couldn't get ".click()" to work) to virtually click the component:
code Appery("componentName").trigger("click");/code
This will virtually click the component, triggering the event that you set up to invoke the service. If you are using the page as a template or ever need to duplicate the page for any reason, when the service name changes in the "Data" tab, the service name will also change in the event. making the page function without needing to enter the code every time!