How to rotate an Image to another Image's position

Question

I am trying to make a tower defense game, where the enemies go through the screen, and you can place towers to hit the enemies. I have accomplished that so far, but I want to enhance the experience by make the towers rotate/aim to the enemies, like it is facing the enemy. I tried using rotate, atan, and other things but nothing worked. Please help if you can. Here's my code so far:

Tower Code

var img = $('<img src="src/towers/tower1/Knight.jpg" alt="Tower" />').css({
      "width": 75 + "px",
      "height": 60 + "px"
    });
    img.css({ transform: `rotate(${90}deg)` })
    img.id = "KnightTower"
    document.body.appendChild(img)

Enemy Code:

var item = document.getElementById("object");
item.style.backgroundColor = "black";
item.style.width = "40px"
item.style.height = "40px"
item.style.position = "absolute"
var yPosObj = 1;
var xPosObj = 70;
item.style.left = xPosObj;

function cloneObj() {
  var i = 0;

  function duplicate() {
    var clone = item.cloneNode(true);
    var cloneY = 1
    var cloneX = 70
    clone.id = "duplicetor" + ++i;
    clone.style.visibility = "visible"
    clone.style.backgroundColor = "black"
    clone.style.position = "absolute"
    clone.style.left = cloneX;
    clone.style.top = cloneY;

    var moveDown1 = setInterval(() => {
      cloneY++;
      clone.style.top = cloneY + "px"
      if (cloneY == 400) {
        clearInterval(moveDown1)
        var moveLeft1 = setInterval(() => {
          cloneX++;
          clone.style.left = cloneX;
          if (cloneX == 400) {
            cloneObj(); //to avoid clone appendation problems
            clone.style.visibility = "hidden";
            clearInterval(moveLeft1)
          }
        }, 10)
      }
    }, 10)

    item.parentNode.appendChild(clone);

  }

  duplicate()
}


var moveDown = setInterval(() => {
  yPosObj++;
  item.style.top = yPosObj + "px"
  if (yPosObj == 400) {
    clearInterval(moveDown)
    var moveLeft = setInterval(() => {
      xPosObj++;
      item.style.left = xPosObj;
      if (xPosObj == 400) {
        cloneObj(); //to avoid clone appendation problems
        clearInterval(moveLeft)
        item.style.visibility = "hidden";
      }
    }, 10)
  }
}, 10)

You can see what I have gotten so far here:

 var cursorAimX; var cursorAimY; function cursorAimPos(event) { setInterval(() => { cursorAimX = event.clientX; cursorAimY = event.clenitY; }, 0.1) } var item = document.getElementById("object"); item.style.backgroundColor = "black"; item.style.width = "40px" item.style.height = "40px" item.style.position = "absolute" var yPosObj = 1; var xPosObj = 70; item.style.left = xPosObj; function cloneObj() { var i = 0; function duplicate() { var clone = item.cloneNode(true); var cloneY = 1 var cloneX = 70 clone.id = "duplicetor" + ++i; clone.style.visibility = "visible" clone.style.backgroundColor = "black" clone.style.position = "absolute" clone.style.left = cloneX; clone.style.top = cloneY; var moveDown1 = setInterval(() => { cloneY++; clone.style.top = cloneY + "px" if (cloneY == 400) { clearInterval(moveDown1) var moveLeft1 = setInterval(() => { cloneX++; clone.style.left = cloneX; if (cloneX == 400) { cloneObj(); //to avoid clone appendation problems clone.style.visibility = "hidden"; clearInterval(moveLeft1) } }, 10) } }, 10) item.parentNode.appendChild(clone); } duplicate() } var moveDown = setInterval(() => { yPosObj++; item.style.top = yPosObj + "px" if (yPosObj == 400) { clearInterval(moveDown) var moveLeft = setInterval(() => { xPosObj++; item.style.left = xPosObj; if (xPosObj == 400) { cloneObj(); //to avoid clone appendation problems clearInterval(moveLeft) item.style.visibility = "hidden"; } }, 10) } }, 10) //this worked finally $(function() { $("#contain").click(function(e) { var x = e.pageX + 'px'; var y = e.pageY + 'px'; var { imgwidth, imgheight, img } = imgstuff(); if ((e.pageX + imgwidth) > ($(this).position().left + $(this).width())) x = ($(this).position().left + $(this).width()) - imgwidth + "px"; if ((e.pageY + imgheight) > ($(this).position().top + $(this).height())) y = ($(this).position().top + $(this).height()) - imgheight + "px"; var div = $('<div class="content">').css({ "position": "absolute", "left": x, "top": y }); div.append(img); $(this).append(div); function imgstuff() { var img = $('<img src="src/towers/tower1/Knight.jpg" alt="Tower" />').css({ "width": 75 + "px", "height": 60 + "px" }); img.css({ transform: `rotate(${90}deg)` }); img.id = "KnightTower"; var imgwidth = 10; var imgheight = 10; return { imgwidth, imgheight, img }; } }); });

 html, body { height: 100%; width: 100%; } /* #object { position: absolute; background-color:#000000; width:40px; height:40px; top:200px; left:200px; }*/ #contain{ height:490px; width:457px; border: 1px solid black; position:relative; } #KnightTower { width: 50px; height: 50px; }

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>replit</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <img src="src/enemies/main/enemy1:jpeg" id="object"> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="script.js"></script> <div id="contain"> </div> <:-- This script places a badge on your repl's full-browser view back to your repl's cover page, Try various colors for the theme, dark, light, red, orange, yellow, lime, green, teal, blue, blurple: magenta. pink. --> <script src="https://replit.com/public/js/replit-badge.js" theme="magenta" defer></script> </body> </html>

Some images dont work because I saved them in the folder I can't upload here

So you see here that the Knight image is not facing the enemy where ever the enemy goes. Thank you for your time and your patience!

-Kevin