The issue arises when combining the desktop and mobile versions of the clock script. The first clock works fine on its own, but upon duplicating another set of scripts for the second clock, it encounters display problems. I have appropriately labeled the codes for the first clock as "For desktop version" and for the second clock as "For mobile version" to distinguish between the two sets of codes.
<!--For desktop version-->
<div id="svgtimedesktop">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
onload="startUp()">
<script>
...
While attempting to resolve the issue in the mobile version by adding a number 2 to all relevant functions and IDs, the problem persists. Even after making those adjustments, the second clock continues to display incorrectly when combined with the desktop version. The mobile version works perfectly when isolated. What further modifications are needed to rectify this? Below are the modified codes for the mobile version.
... Mobile version code edits here ...
]]>
</script>
<rect id="backGround" x="50" y="50" width="300" height="200" fill="black" stroke="#444" stroke-width="5"/>
<rect id="backGround" x="53" y="53" width="294" height="194" fill="none" stroke="#fff" stroke-width="1"/>
<g id="clock3D">
<circle id="red" cx="-150" cy="-150" r="4" fill="red"/>
<circle id="green" cx="-150" cy="-150" r="4" fill="green" opacity="0.3"/>
</g>
<text id="date" x="80" y="240" font-size="20" fill="white">
date
...
</svg>
</div>
... Further content if necessary ...