Проблема с отображением для выполнения функции при нажатии на кнопку во всплывающем окне листовки

Question

Я борюсь с простой проблемой в JS. У меня есть карта Leaflet с кучей маркеров, при нажатии на маркер у вас появляется всплывающее окно с некоторой информацией и двумя кнопками. Я пытаюсь отобразить div с дополнительной информацией при нажатии кнопки. Кажется, что когда я нажимаю на него, отображается div и все остальные. Условие кажется верным для всех маркеров в цикле, что неверно, так как нажата только одна кнопка.

Ребята, у вас есть идеи?

$.getJSON(uri, function(data){
      for (let river in data.rivers){

          var popup = data.rivers[river].name +
              '<br/><b>Water Level :</b> ' + data.rivers[river]['water-level'] + " m3/s" +
              '<br/><b>Water Temperature :</b> ' + data.rivers[river]['temperature'] + " °C" +
              '<br/><b>Sample Time :</b> ' + data.rivers[river]['date-and-time'] +
              '<button type="button" id="more-infos" class="btn btn-primary">More infos</button>' + " " +
              '<button type="button" class="btn btn-warning">Alert me</button>';

          // The problem is here
          $("div").on('click', '#more-infos', function (e) {
            onClickMoreDetails(data.rivers[river]);
          });

          var marker = new L.marker(L.latLng(parseFloat(data.rivers[river].latitude), parseFloat(data.rivers[river].longitude)));
          marker.bindPopup(popup);
      }
  });
  
  
  function onClickMoreDetails(data){
    console.log(data);
    }

Answer 1

Прежде всего, я не использовал идентификаторы в шаблоне, которые могли бы дублироваться.

Второй - чтобы определить, какую реку вы хотите показать, я использовал атрибут данных data-river="'+i+'" на кнопке дополнительной информации.

И, наконец, в обработчике щелчков мыши получите значение атрибута данных из event.target и получите ваши данные из карты объектов.

function onClickMoreDetails(event){
  console.log(data.rivers[event.target.dataset['river']]);
}

Проверьте это: https://jsfiddle.net/fqL9g6cb/