I'm having trouble adding an EventListener to a image witch are created dynamically.

Here is the code I'm having trouble with:

Code:
var dotNr = 0;
function addDot() {

	var img = document.createElement("img");
	img.src = "imageOverlay_files/dots/d9.png";
	img.id = "d"+dotNr;
	
	img.draggable = "false";
	//img.onmousedown = "mouseDownDrag(\'d0'\)";
	//img.onmousedown = "mouseDownDrag(\'d" + dotNr + "\')";
	var src = document.getElementById("header");
	src.appendChild(img);
	document.getElementById("d"+dotNr).setAttribute('draggable', false);
	var mouseDownDragString = "mouseDownDrag(\'d"+dotNr+"\')";
	
	document.getElementById("d"+dotNr).addEventListener("mousedown", eval(mouseDownDragString));
	dotNr = dotNr + 1;
}

Here is my entire code:
HTML Code:
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
  </head>
  <body>
  
  <button onclick="addDot()">Add dot</button>
  <div id="header"></div>
  
<p id="myP2" onmousedown="mouseDownDrag('myP2')" onmouseup="mouseUp()">
Click the text 2!
</p>
<img src="imageOverlay_files/dots/d9.png" alt="x" id="d10" class="dots" draggable="false" onmousedown="mouseDownDrag('d10')"/>
<img src="imageOverlay_files/dots/d9.png" alt="x" id="d11" class="dots" draggable="false" onmousedown="mouseDownDrag('d11')"/>
    <script>

function mouseDownDrag(dragTargetId) {
  dragTarget= document.getElementById(dragTargetId);
  //dragTarget.style.color = "red";
  dragTarget.style.position = 'absolute';
  dragTarget.style.zIndex = 1000;
   // move it from any existing parents directly to the body
   // to position it relative to the body
   document.body.append(dragTarget);
   // and put this absolutely positioned text under the pointer
   moveAt(event.pageX, event.pageY);
    // centers the text on the coordinates (pageX, pageY)
    function moveAt(pageX, pageY) {
       dragTarget.style.left = pageX - dragTarget.offsetWidth / 2 + 'px';
       dragTarget.style.top = pageY - dragTarget.offsetHeight / 2 + 'px';
     }
     function onMouseMove(event) {
       moveAt(event.pageX, event.pageY);
     }
    //  move the text on mousemove
    document.addEventListener('mousemove', onMouseMove);
    // drop the text, remove unneeded handlers
    onmouseup = function() {
     document.removeEventListener('mousemove', onMouseMove);
      dragTarget.onmouseup = null;
    };
}
var dotNr = 0;
function addDot() {

	var img = document.createElement("img");
	img.src = "imageOverlay_files/dots/d9.png";
	img.id = "d"+dotNr;
	
	img.draggable = "false";
	//img.onmousedown = "mouseDownDrag(\'d0'\)";
	//img.onmousedown = "mouseDownDrag(\'d" + dotNr + "\')";
	var src = document.getElementById("header");
	src.appendChild(img);
	document.getElementById("d"+dotNr).setAttribute('draggable', false);
	var mouseDownDragString = "mouseDownDrag(\'d"+dotNr+"\')";
	
	document.getElementById("d"+dotNr).addEventListener("mousedown", eval(mouseDownDragString));
	dotNr = dotNr + 1;
}

    </script>
  </body>
</html>