Im having two absolutely identical buttons on a page.
Why? – I’m using WordPress, and I need a button that is generated by a plugin to be on a certain spot, so I copied the HTML of the button and placed it in that spot, and I hid the original button with "display:none".
What’s the problem?
On mobile the function of the button doesn’t work, but it does on PC.
The question – can that duplicated ID be the problem, even tho the original button is hidden?
At the moment I’m a bit clueless how to fix that because I don’t want to touch the plugin’s code, and If I change the ID of the button, the function probably wont work.
>Solution :
Yes, having two identical buttons with the same ID on a page can cause issues, even if one of them is hidden. IDs should always be unique on a page to ensure that your HTML is valid and that JavaScript functions as expected.
When you duplicate the HTML of the button and place it in a different location on the page, you should also change the ID of the duplicate button to something unique. You can also update any JavaScript or CSS that references the original button ID to point to the new unique ID.
If you don’t want to modify the plugin’s code, you can try using a class instead of an ID to style and position the button. This will allow you to have multiple buttons with the same class name without causing conflicts. However, you’ll still need to ensure that any JavaScript that interacts with the button uses the correct class name.
In any case, it’s important to have unique IDs on your page to avoid issues like the one you’re experiencing.