[sugarcube] How do I use multiple <<linkreplace>> macros?

Question

I'm trying to recreate the functionality you can see here: https://www.glorioustrainwrecks.com/files/TwineMacro-ReplaceTest.html

As you can see, when you click a linkreplaced word, it is replaced by another linkreplaced word that can then be clicked again.

What is happening for my code is that the first <<linkreplace>> text works - the word 'first' comes up as a link. However, when clicked, it becomes two words - 'second', that is not a link, and 'second', that is a link. When you click the linked 'second', it again turns into two words - a normal 'third', and a linked 'third'.

What I'm trying to do is turn the linked word 'first' into a linked word 'second', and then when that 'second' is clicked it turns into a linked 'third', and so on.

This might not make sense, so please copy my code and see what I mean for yourself:

After the <<linkreplace "first">>second <<linkreplace "second">>third <<linkreplace "third">>fourth <</linkreplace>> <</linkreplace>> <</linkreplace>> phase

EDIT: I figured it out!! 

<div id="test">\
After the <<link "first">> 
<<replace "#test">>After the <<link "second">>
<<replace "#test">>After the <<link "third">>
<<replace "#test">>After the [[fourth]] phase,
after passionate nights and intimate days,<</replace>>
<</link>> phase,
after passionate nights and intimate days,<</replace>>
<</link>> phase,
after passionate nights and intimate days,<</replace>>
<</link>> phase,<br> after passionate nights and intimate days,
\</div>