Scoping with On loop

by Elijah Tate

HTML

<div id="main">
    
</div>
<div id="second">
    
</div>

JavaScript

var helloElements = [];
var goodbyeElements = [];

for(var i=0; i<4; i++){
    var number = i;
    var hello = $("<div id='m" + number + "'>Hello</div>").appendTo("#main");
    helloElements.push(hello);
    var goodbye = $("<div id='s" + number + "'>Goodbye</div>").appendTo("#second");
    goodbyeElements.push(goodbye);
}

$.each(helloElements, function(indx, val){
    $(document).on('mouseenter mouseleave', '#m' + indx, function (ev) {
        if(ev.type === 'mouseenter'){
            $('#s' + indx).css("display", "none");
        }else{
            $('#s' + indx).css("display", "block");
        }
	});
});