As always, Im not the best at css, Im crap actually, but anywayz…
The reason in 1. for the elements moving after you clone is likely because you are using position:relaitve on your elements. This will make the position of the element relative to the one that came before it, so when you start adding things to the dom you can change what the element is now relative to and things move. It looks like your using it just so you can move an element a bit to the right of the one before it, instead you could use something like a margin/pad (not sure which, Im not that great at css). Those will both basically be ignored once you move the element with a transform.
Whilst Im here, that message in the alert doesnt need all that +“” stuff, look up template literals and use that instead…the can be multiline, no need for the “\r” stuff.