여러개 커스텀레이아웃 닫기

카카오맵 API (지도/로컬)
1

안녕하세요.
카카오지도 api 보면서 여러개 기능 짜집기 하고있어요.
지금 마커 이미지 변경 + 다중 마커 + 클릭시 커스텀레이아웃
기능을 하고 있는데요

마커이미지변경 + 다중마커까지는 했습니다.
근데 클릭시 커스텀레이아웃 띄우는거와, 닫기버튼을 누르면 닫아지는 기능이 안되네요.
여기에 웬만한 커스텀레이아웃 관련 글을 다 봤는데…

제가 개발자가 아니라서 이해가 잘 안되네요.
닫기버튼을 content 안에 onclick 이벤트로 주지 말고
document.createElement 로 주라고 해서 거기까지는 적용을 했는데

2번째 레이아웃 버튼을 눌러도 첫번째꺼만 닫힙니다…

<script>

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

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

// 빨강색 마커가 표시될 좌표 배열입니다
var redPositions = [
    {
    	title: '123',
    	address: '광주 서구 동림2지구길 45',
    	website: 'https://www.web778.com/wp_main/index.html',
    	logo: '../wp_images/map03_wp.png',
        latlng: new kakao.maps.LatLng(35.17092531225699, 126.87376226314855)
    },
    {
    	title: '대자중학교',
    	address: '광주 서구 하남대로680번길 27 대자중학교',
    	website: 'https://school.iamservice.net/organization/11169',
    	logo: '../wp_images/map03_deaja.png',
        latlng: new kakao.maps.LatLng(35.173613, 126.872732)
    }
];

for (var i = 0; i < redPositions.length; i ++) {
	var imageSrc = '../wp_images/map_red.png'; // 마커이미지의 주소입니다
	var imageSize = new kakao.maps.Size(34, 54); // 마커이미지의 크기입니다

	// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
	var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);

	// 마커를 생성합니다
	var marker = new kakao.maps.Marker({
		map: map,
	    position: redPositions[i].latlng,
	    title: redPositions[i].title,
	    image: markerImage // 마커이미지 설정
	});

	var content = document.createElement('div');
		content.className = 'overlay_box5';
		content.innerHTML = "박스입니다.";

	var jbBtn = document.createElement( 'button' );
	jbBtn.className = 'close';
	jbBtn.innerHTML = "닫기";
	jbBtn.onclick= function(){ customOverlay.setMap(null); };
	content.appendChild(jbBtn);

	// 커스텀 오버레이를 생성합니다
	var customOverlay = new kakao.maps.CustomOverlay({
	    map: map,
	    position: redPositions[i].latlng,
	    content: content
	});

	kakao.maps.event.addListener(marker, 'click', function(){
	    customOverlay.setMap(map);
	});
}
</script>

이게 제가 api 샘플 보고 만든거에요.
2개 이상 하려면 배열도 들어가니 머리가 아프네요…

2

아래 링크참고해주세요.