JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="90%" height=500px>
    <image xlink:href=/favicon.png id=img1 x=0 y=0 height=20 width=20 class="img" />
    <image xlink:href=/favicon1.png id=img2 x=30 y=0 height=20 width=20 class="img" />
</svg>

CSS

.img{cursor:move;}

.img2{cursor:no-drop;}

JavaScript

var svg = document.querySelector('svg');
		
	var shape = document.createElementNS("http://www.w3.org/2000/svg", "image");

	svg.appendChild(shape);
	svg.addEventListener('mousedown', mousedown);
	
	var ddData = {
		element: null,
		initialX: 0,
		initialY: 0,
		originalX: 0,
		originalY: 0,
		finalX: 0,
		finalY: 0,
		contadorElementos: 1,
		movidos: {},
		index: 0
	};

	//start move	
	function mousedown(e) {
			e.preventDefault();
			var evt = e || window.event;
			ddData.element = evt.target || evt.srcElement;
			if (!ddData.element || ddData.element.tagName == 'svg' || ddData.movidos[ddData.element.id]) return ddData.element = null;
			ddData.element.parentNode.appendChild(ddData.element.cloneNode(true));
			
			//img1
			if (ddData.element.id == "img1"){
				ddData.element.id = 1;
			}
			//img2
			if (ddData.element.id == "img2"){
				ddData.element.id = 2;
			}
			ddData.initialX = evt.clientX;
			ddData.initialY = evt.clientY;
			ddData.originalX = parseFloat(ddData.element.getAttributeNS(null, ddData.element.tagName != 'circle' ? 'x' : 'cx'));
			ddData.originalY = parseFloat(ddData.element.getAttributeNS(null, ddData.element.tagName != 'circle' ? 'y' : "cy"));
			
	};
	
	
	var position_souris_x = [];
	var position_souris_y = [];
	var index_objet = []; 
	

					
	svg.onmousemove = function (e) {
		e.preventDefault();
		var evt = e || window.event;
		var el = ddData.element;
		if (el) {
			var posX = ddData.originalX + evt.clientX - ddData.initialX;
			var posY = ddData.originalY + evt.clientY - ddData.initialY;
			
			if (el.tagName != 'circle') {
				el.setAttributeNS(null, "x", posX);
				el.setAttributeNS(null, "y", posY);
			}
			ddData.finalX = posX;
			ddData.finalY = posY;
			
		}
	}
	
	var nombre_image;
	x_sonde = [];
	y_sonde = [];
	x_compteur = [];
	y_compteur = [];
	
	//stops drag movement
	svg.onmouseup = function (e) {
		e.preventDefault();
		var evt = e || window.event;
				
		var id = ddData.element && ddData.element.id;
		if (id &&...