Position element in relation to a list element - css

Question

I'm trying to make a pop-up options box appear next to each one of the elements of a file list. This window show the options available for that files.
I'm using an onClick function that toggle classes between one hidden and the other visible. My problem is that the box is placed always in the same place, despite the file you click, so it seems like you are always opening the options from the first file.
The React code:
return (
<div className='file-row'>
<div className='file-row-1'>
<div className='checkbox-iconFile-container'>
<input className='checkbox-folder' type="checkbox"/>
<p id={props.id} className='file-name'><img className='resourceIcon'alt='tipo de documento' src={resourceIcon}></img>{newStr}</p>
</div>
<p className='file-date'>{date}</p>
<p className='groups-file-text'>UBIP,...</p>
</div>
<div className='div-hidden-options'>
<ModalResources></ModalResources>
<div className='moreInfo-dots-container' onClick={showFileOptions}>
<img className='moreInfo-dots' alt='Opciones' src={dots}></img>
</div>
<div id='file-options' className='div-file-options-hidden'>
<p>Modificar título</p>
<p>Modificar archivo</p>
<p>Mover recurso</p>
<p>Eliminar recurso</p>
</div>
</div>
</div>
)
The showFileOptions function :
function showFileOptions () {
let optionsDiv = document.getElementById('file-options');
optionsDiv.classList.toggle('div-file-options-show');
}
And the CSS:
.div-hidden-options {
width: 15%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.div-file-options-hidden {
visibility: hidden;
position: absolute;
}
.div-file-options-show {
visibility: visible;
position: absolute;
margin-left: 15%;
background-color: white;
border: 1px solid #DDDDDD;
padding: 5px;
border-radius: 5px;
margin-top: -36px;
}
And an image of the position that the box takes regardless of the file we click:
And this is the desirable behaviour of the box when the second file is clicked: