Add multiple HTML attributes to an Elementor button

There are 2 problems.

The first problem is this:

if (is_single ('^\d+$')) { 

is_single can’t take a regex, it only takes:

Post ID, title, slug, or array of such to check against.
https://developer.wordpress.org/reference/functions/is_single/

So you could do this: is_single( 'my-page' ) for example, but in this case it would be better to do is_single() or better yet is_singular() which
also works for pages and custom post types.

It may also be helpful to know that if your theme correctly uses the body_class function, then the <body> tag will have CSS classes such as is-single etc that can be used for conditional styling without having lots of conditional stylesheets and checks in PHP.

I’d also advise adding the JS by enqueing a javascript file, rather than printing it inline.


The second problem, is when the javascript runs. Your code runs immediately, but it’s in the header, and the page isn’t delivered and rendered instantly all at once. So it’s very likely that when you run document.getElementByClassName("button-class") it will not find the buttons because the HTML for the buttons is still in a network cable or a router making its way to your computer.

Instead, you should run the code when the page signals that the DOM is ready. This event happens when all HTML is loaded and the page is ready.

A basic JS dom ready/loaded event might look like this:

document.addEventListener( 'DOMContentLoaded', function( event ) {
    //the event occurred
} );

More info about what the DOM ready event is here:
https://stackoverflow.com/questions/12637725/what-is-the-dom-ready-event