ForEach l oop применяет только последнее значение к переменной

Question

У меня есть forEach l oop:

coordinates.forEach(function (item) {

        let marker = new FontAwesomeMarker(
            new google.maps.LatLng(item.lat, item.lng),
            map,
            {
                marker_id: item.id,
                icon: 'fa fa-map-marker-alt fa-2x',
                color: 'black',
                clinicName: item.clinicName,
                jobName: item.jobName,
                jobProfession: item.jobProfession,
                clinicLogo: item.clinicLogo,
                applyLink: item.applyLink,
            },
        )

        bounds.extend(marker.latlng)
    });

Который использует эту функцию:

FontAwesomeMarker.prototype.onAdd = function () {

        marker                       = this.marker = document.createElement('div');
        marker.className             = 'marker'
        marker.dataset.jobName       = this.args.jobName
        marker.dataset.clinicName    = this.args.clinicName
        marker.dataset.clinicLogo    = this.args.clinicLogo || ''
        marker.dataset.jobProfession = this.args.jobProfession
        marker.dataset.applyLink     = this.args.applyLink
        marker.id                    = this.args.marker_id

        let icon = document.createElement('i');
        icon.className = 'fa marker-icon text-primary fa-' + this.args.icon;
        icon.style.fontSize = this.args.fontSize;
        icon.style.color = this.args.color;
        marker.appendChild(icon);

        let panes = this.getPanes();
        panes.overlayImage.appendChild(marker)

        if(marker.id != 'start') {
            google.maps.event.addDomListener(marker, "click", function () {

                let infoWindow = document.createElement('div')
                infoWindow.className = 'ds-info-window';
                infoWindow.innerHTML = `
                    <img class="img-avatar img-avatar-thumb img-avatar-bid rounded bg-light" src="${marker.dataset.clinicLogo}" alt="">
                        <h4 class="text-primary"> ${marker.dataset.clinicName} </h4><h5> ${marker.dataset.jobName} <small>(${marker.dataset.jobProfession})</small></h5>
                        <div class="d-block text-center mt-2"><a type="button" class="btn btn-success btn-sm" href="${marker.dataset.applyLink}">
                        <i class="fa fa-plus mr-1"></i> Apply
                        </a><button type="button" class="btn btn-sm btn-round btn-warning ml-2 ds-close-info d-none"><i class="fa fa-times mr-1"></i> Cancel</button></div>
                `
                infoWindow.classList.toggle('show');

                marker.appendChild(infoWindow);

            })
        }

    }

При щелчке по маркеру данные в информационное окно всегда одинаково (данные из последнего элемента в массиве отображаются). Как я могу предотвратить это? Что я делаю не так?