JSFiddle - React, Tailwind, and code Playground
HTML
<svg id="svg" width="100%" height="800">
</svg>
JavaScript
var cont = 0;
function horloge_dynamique(x,y,diametre,decalage){
var svg = document.getElementById('svg');
cont++;
//cree circle
var newCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
newCircle.setAttributeNS(null, 'id', 'circle' + cont);
newCircle.setAttributeNS(null,'stroke-width',2);
newCircle.setAttributeNS(null,'stroke','black');
newCircle.setAttributeNS(null,'fill','Aqua');
svg.appendChild(newCircle);
//cree aiguille heure
var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
newLine.setAttributeNS(null, 'id', 'heure' + cont);
newLine.setAttributeNS(null, "stroke","red");
newLine.setAttributeNS(null, "stroke-width","4");
svg.appendChild(newLine);
//cree aiguille minute
var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
newLine.setAttributeNS(null, 'id', 'min' + cont);
newLine.setAttributeNS(null, "stroke","orange");
newLine.setAttributeNS(null, "stroke-width","2");
svg.appendChild(newLine);
//cree aiguille seconde
var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
newLine.setAttributeNS(null, 'id', 'sec' + cont);
newLine.setAttributeNS(null, "stroke","black");
newLine.setAttributeNS(null, "stroke-width","1");
svg.appendChild(newLine);
//var circle = document.getElementById("circle_horloge");
var circle = document.getElementById("circle" + cont);
circle.setAttribute("cx",x);
circle.setAttribute("cy",y);
circle.setAttribute("r",diametre);
//heure
//var aiguille_heure = document.getElementById("heure");
var aiguille_heure = document.getElementById("heure"+ cont);
aiguille_heure.setAttribute("x1",x);
aiguille_heure.setAttribute("y1",y);
aiguille_heure.setAttribute("x2",x);
aiguille_heure.setAttribute("y2",(y-diametre)+diametre/3);
//minutes
var aiguille_min = document.getElementById("min"+...