Q:

javascript: addEventListener in loop not working. passing same parameter to function with each loop

I have tried the solutions offered in these two threads, however, none of them are working.
Javascript multiple dynamic addEventListener created in for loop - passing parameters not working
JavaScript closure inside loops – simple practical example
So here is where I am at. 
Here is my loop:
var eduWidths = [415.66, 116.13];

function eduResize(j,el){
            var edu = document.getElementById(el);
            console.log("j: "+j+" , el: "+ el +" , eduWidths[j]: "+eduWidths[j]); //output: "j: 1 , el: edu0 , eduWidths[j]: 116.13"

             //this does not work, j is always "1"
            $(edu).animate({width: eduWidths[j]+'px'}, 500);
        }

for(i=0; i<edus.length; i++){
    var edu = document.getElementById('edu'+i);

    edu.addEventListener("mouseover",function(){
        //this works without any problem
        $(this).animate({width:'400px'}, 500);
    });

    var j=0;
    edu.addEventListener('mouseleave', function() {
        //this does call the eduResize function, and passes j and this.id
            eduResize(j,this.id);

        });
    j++;
}

Despite having the correct target, the target div is always resizing using the 1 index position of eduWidths[] array on this line:
$(edu).animate({width: eduWidths[j]+'px'}, 500);

UPDATE:
Here is the HTML:
<div class="eduEvent" id="edu0" ></div>
<div class="eduEvent" id="edu1" ></div>

A:

There was an answer here that was deleted, that helped me solve the problem. 
Is this the most efficient and proper way to do this?
This is what eventually got it to work:
var eduWidths = [415.66, 116.13];

function eduResize(j,el){
            var edu = document.getElementById(el);
            console.log("j: "+j+" , el: "+ el +" , eduWidths[j]: "+eduWidths[j]);
            $(edu).animate({width: eduWidths[j]+'px'}, 500);
        }

for(i=0; i<edus.length; i++){
var edu = document.getElementById('edu'+i);

            edu.addEventListener("mouseover",function(){
                //this.style.width = "400px";
                $(this).animate({width:'400px'}, 500);
                //console.log("this.id: "+ this.id);
            });

            edu.addEventListener('mouseleave', (function iife(currentJ) {
              return function() {
                eduResize(currentJ, this.id);
              };
            })(i)); // <-- here you pass j, which will become currentJ inside the iife

 }//end loop

