Using @ref inside for loop to get element reference

Im trying to get the position of same object in different places, where ,with a javascript function, I should get different top positions but thats not the scenario. The script code:

<script type="text/javascript">    window.ShowAlert = function myFunction(element) {       console.log("Hello World.");    alert(element.offsetTop);   }</script>

The Index.razor code:

@inject IJSRuntime jsRuntime<div>    @for (int i = 0; i < 10; i++)    {<div @onclick="MemberFunction" @ref="memberRef">Click Here</div>    }</div>@code {    private ElementReference memberRef;    void MemberFunction()    {        jsRuntime.InvokeAsync<object>("ShowAlert", memberRef);    }}

As you can see here Im doing a for in the same div, where he goes down the line. What I want from this is for every div posted it should give me a different value of offsetTop, because he goes down the line one by one. How can I manage this problem?

For a better understanding here you have a demo https://blazorfiddle.com/s/4g57o82k . As you can see in the demo the value for each Click Here is the same.

Thank you for your attention.