Leaflet marker on-click display data in div

Question

I have a jacascript code which loads the geojson data from a file and displays circleMarkers (Cannot display normal markers as the popups don't work).

{
  $.ajax({
    dataType: "json",
    type: 'POST',
    url: "geojsonfile.php",
    beforeSend: function() {},
    success: function(data) {
      display = L.geoJson(data, {
        style: function(feature) {
          return {
            color: '#0515B5'
          };
        },
        pointToLayer: function(feature, latlng) {
          return new L.CircleMarker(latlng, {
            radius: 6,
            fillOpacity: 0.85
          });
        },
        onEachFeature: function(feature, layer) {
          layer.bindPopup("Name: " + feature.properties.name);
          document.getElementById("sname").innerHTML = feature.properties.name;
          layer.on({
            click: showData
          });

        }
      }).addTo(map);

    }
  }).error(function(xhr, status, error) {
    console.log(error);
  });

}

function showData(e) {
  $("#sdata").show();
}

The html table where the data is to be displayed is

<table  id="sdata">
  <tbody>
    <tr>
      <td> Name:</td>
      <td id="sname"></td>
    </tr>
  </tbody>
</table>

But the problem is only the last value of the geojson is displayed in the table, Is it possible that onclicking the marker the value in the sname is displayed accordingly like the marker popup.

Answer 1

May be this code

map.on('popupopen', function(e){ var marker = e.popup._source; });

will help you? see: How to identify Leaflet's Marker during a `popupopen` event?

Answer 2

Popups should work, you should bind them to the feature instead of the layer.

Not:

layer.bindPopup("Name: " + feature.properties.name);

But:

feature.bindPopup("Name: " + feature.properties.name);