커스텀 오버레이 이벤트 질문입니다

` for(var i = 0; i < data.length; i++){
var LAT = data[i][“GPS_LAT”]
var LONG = data[i][“GPS_LONG”]

	var content = document.createElement('div');
		content.className = 'marker';
	
	var content_num = document.createElement('div');
		content_num.className = 'number';
		content_num.innerHTML = data.length-i;
		
		content.appendChild(content_num);
	
	positions.push({content: content, latlng: new kakao.maps.LatLng(LAT, LONG)}) //마커가될 커스텀 오버레이 배열

	$(content).mouseover(function(){
		  console.log(i);
	});
}`

다음과 같이 content를 만들어서 마커처럼 커스텀 오버레이를 띄우는데요, 오버레이에 이벤트를 등록하고싶은데 오버레이마다 다른 alert내용을 띄워주고싶은데 코드대로면 콘솔에 처음 그려지는 마커는 0, 1 이런식으로 콘솔이 그려져야하는데 5개의 마커가 있다면 모든 마커에서 5만 뜨는데 이유를 잘 모르겠습니다 ㅠㅠ

for( ; ; ) 문은 es6를 사용하지 않는 이상 변수가 스코프를 유지하지 못하므로
for문에서 ES6 문법인 let을 사용하시거나,
for문 말고 Array.forEach 또는 IIFE를 사용하여 스코프를 강제시켜서 사용해주세요.

var positions = [
{
    title: '카카오', 
    latlng: new kakao.maps.LatLng(33.450705, 126.570677)
},
{
    title: '생태연못', 
    latlng: new kakao.maps.LatLng(33.450936, 126.569477)
},
{
    title: '텃밭', 
    latlng: new kakao.maps.LatLng(33.450879, 126.569940)
},
{
    title: '근린공원',
    latlng: new kakao.maps.LatLng(33.451393, 126.570738)
}];

positions.forEach(function(position, idx) {
    var latlng = position.latlng;
    
    var content = document.createElement('div');
	content.className = 'marker';
    
    var content_num = document.createElement('div');
	content_num.className = 'number';
	content_num.innerHTML = idx;
    
    content.appendChild(content_num);
    
    var overlay = new daum.maps.CustomOverlay({
		 content: content,
		  map: map,
		 position: latlng

		});
    
    content.addEventListener('mouseover', function () { 
    	console.log(idx);
	});
});

/*for(let i = 0; i < positions.length; i++){
var latlng = positions[i].latlng;

var content = document.createElement('div');
	content.className = 'marker';

var content_num = document.createElement('div');
	content_num.className = 'number';
	content_num.innerHTML = i;
	
content.appendChild(content_num);

var overlay = new daum.maps.CustomOverlay({
		 content: content,
		  map: map,
		 position: latlng

		});

content.addEventListener('click', function () { 
    console.log(i);
});*/