Loop for in a .mousemove function

Question

My problem is here :

    $(document).mousemove(function(e){
    for(i = 1; i < 7; i++){
        var tt = document.getElementById("tooltip"+i);
        document.getElementById("help"+i).onmousemove=function(event){
            if(tooltip == 1){
                $(tt).css({left:e.pageX+5, top:e.pageY+5});
                tt.style.visibility= "visible";
            }
        }
        document.getElementById("help"+i).onmouseout=function(event){
            tt.style.visibility= "hidden";
        }
    }
});

With this code, the <div id="tooltip"+i> is showing right next to the mouse, but it's always the last "tooltip"+i, in this case tooltip6 which is showing.

I managed that to work by simply removing the loop for, and writing 6 times that next, each with a different i :

    $(document).mousemove(function(e){
    var i = 1;
    var tt = document.getElementById("tooltip"+i);
    document.getElementById(i).onmousemove=function(){
        if(tooltip == 1){
            $(tt).css({left:e.pageX+5, top:e.pageY+5});
            tt.style.visibility= "visible";
        }
    }
    document.getElementById(i).onmouseout=function(){
        tt.style.visibility= "hidden";
    }
});

In this case, it does what i want. It shows the tooltip1, when the mouse is over the <div id=help1> , and (eg) tooltip4 over the <div id=help4> if i use var i = 4 .

I can obviously just write more and more like that as i add more tooltips, but i really don't understand why the adding of the loop is not working here.

My HTML code with the tooltips :

        <span id=tooltip1>Health points of the rock. Each time it gets to 0, you get some stone</span>
        <span id=tooltip2>Deeper you go, harder it is.</span>
        <span id=tooltip3>Power of the Pickaxe.</span>
        <span id=tooltip4>Go To the Village.</span>
        <span id=tooltip5>Go To the Blacksmith.</span>
        <span id=tooltip6>You can sell stone in the village.</span>

And HTML code with some of the help :

                <div class=liststat id=help1>HP : <span id=hp>0</span></div>
            <br>
            <br>
            <div class=liststat id=help2>Deep Level : <span id=lvlrock>0</span>m</div>
            <br>
            <br>
            <div class=liststat id=help3>Pick Power : <span id=pickpower>0</span></div>
            <br>
            <br>
            <div class=liststat id=help6>Stone : <span id=nstone>0</span></div>

Answer 1

Okay, so after reading the comment, i edited my code to make it simpler, and not adding any other listener, to not crash the script :

$(document).mousemove(function(e){
if(tooltip == 1){
    var i = e.target.id;
    var tt = document.getElementById("tooltip"+i);
    tt.style.visibility = "visible";
    $(tt).css({left:e.pageX+5, top:e.pageY+5});
    document.getElementById(i).onmouseout=function(){
        tt.style.visibility= "hidden";
    }
}

});