Is there a way to add custom ids to Leaflet markers derived from a GeoJSON file?

Question

I'm fairly new to JavaScript and I'm currently trying to connect each of my Leaflet markers to a certain portion of text in another div so that when a user clicks the marker, the site will auto scroll to that relevant point in the text.

This is the code I intend to use once each of the markers have their unique ids to be manipulated:

document.getElementById("A").addEventListener("click", function() {
  window.location.href = "#B";
});

So in this case, "A" would be the unique id given to one of the markers, and #B is the id of the text I want to scroll to.

*Edit

I should clarify that the primary issue is actually giving ID's to the markers from the geoJson elements I added onto the map. The relevant code for this is here:

//convert points to circles in layer
function pointToLayer(feature, latlng, attributes){

    var attribute = attributes[0];

    // styling for the circles which are pink with white borders
    var geojsonMarkerOptions = {
        fillColor: "#800000",
        color: "white",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.5,
    };

    var layer = L.circleMarker(latlng, geojsonMarkerOptions);

    //returns layer with circle markers
    return layer;

//function to fill the global attribute array variable at top of page
function processData(data){

    //variable to store the first feature in the data
    var properties = data.features[0].properties;

    //for loop to push each attribute name into array
    for (var attribute in properties){ 

        //indexOf will only allow attributes with population values to be pushed
        if (attribute.indexOf("Victims") > -1){
            attributes.push(attribute);

        };
    };

    return attributes; //returns attributes array to be used in callback
};


//function to retrieve the data from geojson
function getData(map){

    //load the data and calls functions
    $.getJSON("data/WarCrimes3.geojson");

};

Edit with Whole Code

var map;
var featureId =0;
var attributes = []; 

function createMap(){
    // create map and set parameters

    map = L.map('mapid', {
      center: [20.20, 136.25],
      zoom: 2,
      minZoom: 4,
      maxZoom: 8,
      maxBounds: [(25.2, 115.7), (45.7, 155.54)],
    });

    getData(map);

};

function createSymbols(data, attributes){

    L.geoJson(data, {

        pointToLayer: function(feature, latlng){

            return pointToLayer(feature, latlng, attributes);
        }

    }).addTo(map);
};

function pointToLayer(feature, latlng, attributes){

    var attribute = attributes[0];

    var geojsonMarkerOptions = {
        fillColor: "#800000",
        color: "white",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.5,
    };

    var layer = L.circleMarker(latlng, geojsonMarkerOptions);

    layer.featureId = featureId++;

    console.log(layer.featureId)

    return layer;

};

function processData(data){

    //variable to store the first feature in the data
    var properties = data.features[0].properties;

    //for loop to push each attribute name into array
    for (var attribute in properties){ 

        if (attribute.indexOf("Victims") > -1){
            attributes.push(attribute);

        };
    };

    return attributes; //returns attributes array to be used in callback
};


//function to retrieve the data from geojson
function getData(map){

    $.getJSON("data/sample.geojson", function(response){

      createSymbols(response,attributes);

    });
};

$(document).ready(createMap);

The id's are being logged, but not being assigned to the individual markers

Answer 1

On possible solution for this is to simply add this feature id as property/attribute to the created marker object, one just have to be careful not to use property/attribute name already used by Leaflet.

If we choose name featureId for this property/attribute, code could then look something like this (assuming pointToLayer function us used as pointToLayer option when creating GeoJSON layer):

var featureId = 0;
var attributes = [];
.
.
.
function pointToLayer(feature, latlng){
  var geojsonMarkerOptions = {
      fillColor: "#800000",
      color: "white",
      weight: 1,
      opacity: 1,
      fillOpacity: 0.5,
  };
  var layer = L.circleMarker(latlng, geojsonMarkerOptions);
  layer.featureId = featureId++;
  for (var attribute in feature.properties){ 
    if (attribute.indexOf("Victims") > -1){
      attributes.push(attribute);
    };
  };
  return layer;
}

Here is complete working code to prove that concept works. Popup is bound to each marker, where content of popup is taken from attributes array with the help of featureId layer/marker property. Code assumes that GeoJSON property Victims contains number of victims. Coordinates are a bit changed to match test my test GeoJSON:

  var map;
  var featureId = 0;
  var attributes = []; 
  
  function createMap(){
      map = L.map('mapid', {
        center: [39.75, -104.99],
        zoom: 13
      });
      getData(map);
  };
  
  function createSymbols(data, attributes){
      L.geoJson(data, {
          pointToLayer: function(feature, latlng){
              return pointToLayer(feature, latlng, attributes);
          }
      }).addTo(map);
  };
  
  function pointToLayer(feature, latlng, attributes){
      var attribute = attributes[0];
      var geojsonMarkerOptions = {
          fillColor: "#800000",
          weight: 1,
          opacity: 1,
          fillOpacity: 0.5,
      };
      var layer = L.circleMarker(latlng, geojsonMarkerOptions);
      layer.featureId = featureId++;
      for (var attribute in feature.properties){ 
        if (attribute.indexOf("Victims") > -1){
          attributes.push(feature.properties[attribute]);
          var popup = L.popup().setContent(function(layer) {
            return("Victims: " + attributes[layer.featureId]);
          });
          layer.bindPopup(popup);
        };
      };                    
      
      return layer;
  };
    
  function getData(map){
      $.getJSON("data/test-geojson.txt", function(response){
        createSymbols(response,attributes);
      });
  };
  
  $(document).ready(createMap);

Screen shot: