make unique id in loop for js

Question

im having a hard time making this js work for all of my divs, now it works only on the first div it detected, and I searched all over the internet and Stackoverflow without success, Thanks. The code and ajax working good.

 function userdeitals(id) {
        var li = document.getElementById(id);
        var tcn = '.'+li.className;
            $(tcn).tooltipster({
                content: '<span style="color:black;">רק רגע...</span>',
                updateAnimation: "fade",
                contentAsHTML: true,
                interactive: true,
                multiple: true,
                functionBefore: function(instance, helper, ) {
                    var $origin = $(helper.origin);
                    var param = "?term="+id;
                    if ($origin.data('loaded') !== true) {
                        $.get('{{route('getuser')}}' + param, function(data) {
                            instance.content('data.user.name');
                            $origin.data('loaded', true);
                        });


                    }
                }
            });

Div:

<span style="top: 8px; left: 8px; position: absolute; " onmouseover="userdeitals(this.id)" id="{{$deal->user->id}}" class="boxfor{{$deal->id}}"><img src="{{asset('assets')}}/users/avatars/1{{$deal->user->avatar}}" alt="user" style="width: 35px; border-radius: 30px;" class="profile-pic"> </span>

Answer 1

getElementByID returns only one element by its id (which should be unique). If you want to get all the divs on a page, you probably want something more like querySelectorAll.

As an aside, that's a span. A span is not a div.