카카오 api 마커에 클릭이벤트를 여러개 추가하려는데 문제가 있습니다

if ($("#range").val() == “종로”) {

                var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
                    mapOption = {
                        center: new kakao.maps.LatLng(37.57366022871447, 126.97417536971453), // 지도의 중심좌표
                        level: 3 // 지도의 확대 레벨
                    };

                var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다


                // 마커 이미지의 이미지 주소입니다
                var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";



                // 마커 이미지의 이미지 크기 입니다
                var imageSize = new kakao.maps.Size(24, 35);

                // 마커 이미지를 생성합니다    
                var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);


                var data = [
                    [37.57366022871447, 126.97417536971453, '<div style="padding:3px;">미트러스 <br><a href="https://map.naver.com/v5/entry/place/37611389?c=14134693.5474278,4519373.8385667,16,0,0,0,dh&placePath=%2Fhome%3Fentry=pll" >정보</a></div>'],
                    [37.57332696962825, 126.9730787981214, '<div style="padding:3px;">형제네고기마을<br> <a href="https://map.naver.com/v5/search/%EC%A2%85%EB%A1%9C%20%ED%98%95%EC%A0%9C%EB%84%A4%EA%B3%A0%EA%B8%B0%EB%A7%88%EC%9D%84/place/31390893?c=14134433.1053673,4519343.4775110,16,0,0,0,dh" >정보</a></div>'], //맞춰 주는건 굵은 글씨
                    [37.57844158822745, 126.98222879812157, '<div style="padding:3px;">닭칼 <br><a href="https://map.naver.com/v5/search/%EC%A2%85%EB%A1%9C%20%EB%8B%AD%EC%B9%BC/place/1644588906?c=14135476.9485348,4520081.5725654,16,0,0,0,dh&placePath=%3F%2526" >정보</a></div>']
                ]

                for (var i = 0; i < data.length; i++) {     // 마커를 생성합니다
                    var marker = new kakao.maps.Marker({
                        map: map, // 마커를 표시할 지도
                        position: new kakao.maps.LatLng(data[i][0], data[i][1]), // 마커를 표시할 위치
                        title: data[i][2], // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
                        image: markerImage // 마커 이미지 
                    });
                    // 마커를 클릭했을 때 마커 위에 표시할 인포윈도우를 생성합니다
                    var iwContent =  data[i][2],
                        iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다
                    // 인포윈도우를 생성합니다
                    var infowindow = new kakao.maps.InfoWindow({
                        content: iwContent,
                        removable: iwRemoveable
                    });
                    // 마커에 클릭이벤트를 등록합니다
                    kakao.maps.event.addListener(marker, 'click', function () {
                        // 마커 위에 인포윈도우를 표시합니다
                        infowindow.open(map, marker);
                    });
                }

            }

여러개의 마커를 띄운 뒤, 이들을 클릭했을 때 각각 인포윈도우가 열리도록 하는 것을 구현 중인데요, 반복문을 이용해 각 마커들의 위치와 타이틀을 띄우는 것은 구현했는데, 각 마커에 클릭이벤트를 적용하는 것이 문제가 됩니다. markers 라는 배열을 만들어 markers.push(marker); 이용하면 될 것 같기도 한데 계속 실패하네요ㅜ 답변 해주시면 감사하겠습니다.

for문에서 스코프를 유지하지 못해 마지막 값으로 적용되는 문제입니다.
for문 대신 Array.forEach 또는 IIFE를 사용하여 스코프를 강제시켜서 사용해주세요