Two or more popups with different content

[NextM]

Hello!

I'm totally new at js coding and I'm working on a blog site where I translate song lyrics to Hungarian.
I wanted to write some extra info for some of the lyric lines in a popup window, so if someone clicks on the highlighted lines, he/she could read the additional info in the popup window. (It'd be something like genius.com)
I almost succeed with the method I've read here: https://www.w3schools.com/howto/howto_js_popup.asp
But when I tried to make a second popup window with a different text for another lyric line, it showed only the first window, above the first line, with the first text.
I made an example to show my problem: https://www.w3schools.com/code/tryit.asp?filename=FSY26TGIQEXD

Could anyone help me to make two or more different popups on the same page?

(I hope I write to the right place.)

[dsonesuk]

Duplicate Identical ID is not allowed as a it is used only to identify a singular specific element within a page. Using 'this' will identify the element the event occurred on, then by using 'children' with index identifier you can target the specific message element

https://www.w3schools.com/code/tryit.asp?filename=FSZ70A83WZ91

[NextM]

Thank you!

But it worked only until I didn't want to customize the text style (size, background color, etc).

Edited July 5, 2018 by NextM

[dsonesuk]

WHAT???????

[NextM]

I made the text smaller and bold and it's not working now: https://www.w3schools.com/code/tryit.asp?filename=FSZMW3144BKC

[dsonesuk]

First off!, no one EVER uses font element anymore, second! Since the span child is no longer the first child represented by children[0] anymore, but the second child, what did you expect!

Move the span so its the first child again OR change the index to reference the second child.