Identify different buttons that have the same "onmouseover" function

I am trying to identify different buttons that have the same ID with different positions. I am trying to display a window next to the correct button, but so far it is only working with the first button, and when I try to add another button with the same ID as it should use the same function logic, it displays the div element next to the first button.

I was thinking maybe each button should have its own identifier and the function uses the code from identify different buttons that have the same "onclick" function name to search through the list of existing buttons and run the function at that button, however, I do not know how to do this. Here is my code as to what I have tried.

function displayInfo(){
  var coords = friend_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";
  friend_button.addEventListener("mouseout", function(){
    friend_info.style.display = "none";
  });
};

<button type="button" class="friend-button" id="friend-button" onmouseover=displayInfo()>
    <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_info">
        <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>

>Solution :

You should never have the same id for more than an element. Its meaning is Unique Identifier. By the way solution is to pass a parameter (the friend Id, or the name, an unique Id btw) from the hovering button.

onmouseover=displayInfo(frendId)

_

function displayInfo(frendId){    // do stuff