How do I find the ID of a unique element for a dynamic button that displays profile info in javascript

I am trying to display a unique user info when the mouse of the user hovers over a button, a unique information page is displayed. This page is a unique div element with a specific ID, which is assigned to the button when the button gets added onto the page dynamically. I am struggling with getting the ID of the info div. Any help would be appreciated. Here is the HTML code where you will be able to see 2 different buttons with 2 different div element named friend_info1 and friend_info2 which are the elements I am trying to get the ID of:

<button type="button" class="friend-button" id="friend-button1" onmouseover=displayInfo(this)>
<div class="media">
<img src="default-pic.png" class="mr-3" alt="Default Picture" width="50" height="50">
</div>
<div class="media-body">
<h5 class="mt-0">Friend1</h5>
<p>status: active</p>
</div>
</button>
<div class="friend_info" id="friend_info1" onmouseover="getUserInfo(this);">
<video autoplay muted loop class="backgroundInfo" id="backgroundInfo">
<source src="Background.mp4" type="video/mp4">
</video>
<div class="d-flex">
<img src="default-pic.png" class="profile-picture" alt="Default Picture" width="200" height="200">
<div class="d-flex flex-column">
<div class="p-2">
<h1 class="Friend_Name">Friend1</h1>
</div>
<div class="p-1">
<h5>status: active</h5>
</div>
<div class="p-9">
<p class="info">Name: Joesdadsadsadsadsa</p>
<p class="info">Surname: Smithdsadsadsadsadsa</p>
<p class="info">Phone Number: 07914836605</p>
<p class="info">Gender: Male</p>
<p class="info">Date of birth: 14/02/2003</p>
</div>
</div>
</div>
</div> 
<button type="button" class="friend-button" id="friend-button2" onmouseover=displayInfo(this)>
<div class="media">
<img src="default-pic.png" class="mr-3" alt="Default Picture" width="50" height="50">
</div>
<div class="media-body">
<h5 class="mt-0">Friend1</h5>
<p>status: active</p>
</div>
</button>
<div class="friend_info" id="friend_info2"  onmouseover=getUserInfo(this)>
<video autoplay muted loop class="backgroundInfo" id="backgroundInfo">
<source src="Background.mp4" type="video/mp4">
</video>
<div class="d-flex">
<img src="default-pic.png" class="profile-picture" alt="Default Picture" width="200" height="200">
<div class="d-flex flex-column">
<div class="p-2">
<h1 class="Friend_Name">Friend1</h1>
</div>
<div class="p-1">
<h5>status: active</h5>
</div>
<div class="p-9">
<p class="info">Name: John</p>
<p class="info">Surname: Smithers</p>
<p class="info">Phone Number: 07567836505</p>
<p class="info">Gender: Male</p>
<p class="info">Date of birth: 04/12/2000</p>
</div>
</div>
</div>
</div>

Here is the javascript for which I need the unique ID for. Remember, I cannot use getElementById as the id changes accordingly to which button I am hovering:

var friend_button = document.getElementById("friend-button");
function displayInfo(button){
const position = button.getAttribute("data-position");
var friend_info = document.getElementById(`friend_info${position}`);
var coords = button.getBoundingClientRect();
var coordsOfInfo = $('.backgroundInfo').width();
var subtractWidth = coords.left-coordsOfInfo;
friend_info.style.left = subtractWidth+"px";
friend_info.style.top = coords.top + "px";
friend_info.style.display = "block";
button.addEventListener("mouseout", function(){
friend_info.style.display = "none";
});
};

I have tried creating a function that gets the ID of the div element when hovered however I was getting returned a null value evertime I hovered over the element (You can see my attempt in the html code above with the "getUserInfo(this)".

function getUserInfo(information) {
console.log(information.id);
return information.id;
}

I am not sure if this is what you are trying to achieve. There are few ways to do it.

This method is that assuming that unique user info element id are in a fixed format as such friend_infoX where the X is the numbering. If this is the case, then you can add a custom attribute to the button data-position and set the numbering as the value. By this way, you can dynamically set and use the getElementById to access the respective user info.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function displayInfo(button){
const position = button.getAttribute("data-position");
var friend_info = document.getElementById(`friend_info${position}`);
var coords = button.getBoundingClientRect();
var coordsOfInfo = $('.backgroundInfo').width();
var subtractWidth = coords.left-coordsOfInfo;
friend_info.style.left = subtractWidth+"px";
friend_info.style.top = coords.top + "px";
friend_info.style.display = "block";
button.addEventListener("mouseout", function(){
friend_info.style.display = "none";
});
};

<!-- language: lang-css -->

.friend_info{
display: none
}

<!-- language: lang-html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="friend-button" id="friend-button1" data-position="1" onmouseover=displayInfo(this)>
<div class="media">
<img src="default-pic.png" class="mr-3" alt="Default Picture" width="50" height="50">
</div>
<div class="media-body">
<h5 class="mt-0">Friend1</h5>
<p>status: active</p>
</div>
</button>
<div class="friend_info" id="friend_info1">
<video autoplay muted loop class="backgroundInfo" id="backgroundInfo">
<source src="Background.mp4" type="video/mp4">
</video>
<div class="d-flex">
<img src="default-pic.png" class="profile-picture" alt="Default Picture" width="200" height="200">
<div class="d-flex flex-column">
<div class="p-2">
<h1 class="Friend_Name">Friend1</h1>
</div>
<div class="p-1">
<h5>status: active</h5>
</div>
<div class="p-9">
<p class="info">Name: Joesdadsadsadsadsa</p>
<p class="info">Surname: Smithdsadsadsadsadsa</p>
<p class="info">Phone Number: 07914836605</p>
<p class="info">Gender: Male</p>
<p class="info">Date of birth: 14/02/2003</p>
</div>
</div>
</div>
</div> 
<button type="button" class="friend-button" id="friend-button2" data-position="2" onmouseover=displayInfo(this)>
<div class="media">
<img src="default-pic.png" class="mr-3" alt="Default Picture" width="50" height="50">
</div>
<div class="media-body">
<h5 class="mt-0">Friend2</h5>
<p>status: active</p>
</div>
</button>
<div class="friend_info" id="friend_info2">
<video autoplay muted loop class="backgroundInfo" id="backgroundInfo">
<source src="Background.mp4" type="video/mp4">
</video>
<div class="d-flex">
<img src="default-pic.png" class="profile-picture" alt="Default Picture" width="200" height="200">
<div class="d-flex flex-column">
<div class="p-2">
<h1 class="Friend_Name">Friend2</h1>
</div>
<div class="p-1">
<h5>status: active</h5>
</div>
<div class="p-9">
<p class="info">Name: John</p>
<p class="info">Surname: Smithers</p>
<p class="info">Phone Number: 07567836505</p>
<p class="info">Gender: Male</p>
<p class="info">Date of birth: 04/12/2000</p>
</div>
</div>
</div>
</div>

<!-- end snippet -->

Besides, for the function getUserInfo(this), you can simply get the element id by doing as such:

function getUserInfo(information) {
//var gettingId = document.getElementById(information); //You dont need this
console.log(information.id);
return information.id;
}