Positioning a div element near another one with javascript (I do not have much experience with javascript)

Question

I tried to position a div element at the right of the other div when the mouse is hovering it. I have to do this operation with more than one couple of div. I solved the hovering problem, the only issue is that the position of the appearing div is the same for all, even if i pass the other element as a parameter the position is still not changing.

this is what i have when i hover the div: i need the appearing div to be on the right of the hovered div. I tried using $(divName).style.left but it did not functioned. thanks

Answer 1

this are my functions to make the div appear or disappear:

/*Make a div appear: targetObject is the hovered div, targetObject1 is the appearin div*/
function enteringObject(targetObject, targetObject1) {
 targetObject1.style.visibility = 'visible';
 let x = $(targetObject).offsetLeft + $(targetObject).offsetWidth;
 let y = $(targetObject).offsetTop + $(targetObject).offsetHeight;
 document.getElementById(targetObject1).style.left = x + 'px';
 document.getElementById(targetObject1).style.top = y + 'px';
 $(targetObject1).fadeIn(500);
}
//Function to make a div disappear, the div is targetObject
function exitingObject(targetObject1) {
 $(targetObject1).fadeOut(0);
 targetObject1.style.visibility = 'hidden';
}

and I implemented them like this:
-for the appearing div:

<span class="riq" id="def2"  align="center" onmouseover="enteringObject(def, def2)" onmouseleave="exitingObject(def, def2)" style="display: none; position:absolute; transform: translate(10%, 270%); z-index: 10;">

-for the hovered div:

<div class="imma" align="center"  id="def" onmouseover="enteringObject(def, def2)" onmouseleave="exitingObject(def, def2)" style="z-index: 5;">