I want to click on the first rectangle and click on the second rectangle, they will be connected by

function drawLine(pointA, pointB, className = null) {
  // deconstructing the objects
  const { x: x1, y: y1 } = pointA;
  const { x: x2, y: y2 } = pointB;
  // finding the point that's above the other point / has lower y position
  const topPoint = y1 <= y2 ? pointA : pointB;
  const bottomPoint = y1 <= y2 ? pointB : pointA;
  // finding the distance between both points using Pythagoras theorem
  const distance = Math.sqrt(
    Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)
  );

  const line = document.createElement("div");
  className && line.classList.add(className);
  
  // set the initial styles
  const styles = {
    backgroundColor: "black",
    width: "5px",
    height: distance + "px",
    position: "absolute",
    transformOrigin: "top center",
    // setting the top of the line to the point that has lower y position / above the other point along y axis
    // Doing so we can simply check the relative rotation towards the bottom pointing from the top point always and that helps us at overall rotating the line
    top: topPoint.y + "px",
    left: topPoint.x + "px",
    // we want the center of the width to be on the x position
    // "left" puts the top left corner instead so we have to translate the whole div by 50% along the x axis
    translate: "-50% 0"
  }
  
  
  // use a loop to set the styling to the line
  for (const [key, value] of Object.entries(styles)) {
    line.style[key] = value;
  }
  
  // calculate how much it needs to rotate towards the other point keeping the origin at the top center
  const base = Math.abs(y1 - y2);
  const rotation = Math.acos(base / distance);
  // based on weather the bottom point is on the left or right of the top point, we are setting the direction to negative or positive 1 to rotate the line either the right or left direction 
  const direction = topPoint.x - bottomPoint.x < 0 ? -1 : 1;
  line.style.rotate = direction * rotation + "rad"
  
  document.body.appendChild(line);
}

function drawLine(pointA, pointB, className = null) {
  // deconstructing the objects
  const { x: x1, y: y1 } = pointA;
  const { x: x2, y: y2 } = pointB;
  // finding the point that's above the other point / has lower y position
  const topPoint = y1 <= y2 ? pointA : pointB;
  const bottomPoint = y1 <= y2 ? pointB : pointA;
  // finding the distance between both points using Pythagoras theorem
  const distance = Math.sqrt(
    Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)
  );

  const line = document.createElement("div");
  className && line.classList.add(className);
  
  // set the initial styles
  const styles = {
    backgroundColor: "black",
    width: "5px",
    height: distance + "px",
    position: "absolute",
    transformOrigin: "top center",
    // setting the top of the line to the point that has lower y position / above the other point along y axis
    // Doing so we can simply check the relative rotation towards the bottom pointing from the top point always and that helps us at overall rotating the line
    top: topPoint.y + "px",
    left: topPoint.x + "px",
    // we want the center of the width to be on the x position
    // "left" puts the top left corner instead so we have to translate the whole div by 50% along the x axis
    translate: "-50% 0"
  }
  
  
  // use a loop to set the styling to the line
  for (const [key, value] of Object.entries(styles)) {
    line.style[key] = value;
  }
  
  // calculate how much it needs to rotate towards the other point keeping the origin at the top center
  const base = Math.abs(y1 - y2);
  const rotation = Math.acos(base / distance);
  // based on weather the bottom point is on the left or right of the top point, we are setting the direction to negative or positive 1 to rotate the line either the right or left direction 
  const direction = topPoint.x - bottomPoint.x < 0 ? -1 : 1;
  line.style.rotate = direction * rotation + "rad"
  
  document.body.appendChild(line);
}

drawLine(
  {x:100, y:50},
  {x:200, y:500}
)

drawLine(
  {x:100, y:50},
  {x:200, y:500}
)