Leaflet post popup properties to sidebar

I am building a game map for a friend and have run into an interesting way to do their popup content. Basically the popups are going to have history over each section so I decided that displaying it in a scrollable sidebar would be the better option. I installed the leaflet plugin Sidebar-V2 and have it running. I also am using a geoJSON variable to dynamically grab multiple parameters of the popup content. So far I’ll have title, type, image and content.

Here is my javascript code:

//Add GeoJSON
var geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "FeatureCollection",
            "features": [
              {
                "type": "Feature",
                "properties": {
                  "name": "Test",
                  "group": "majorcity",
                  "image": "test.png",
                  "popupcontent": "<p>Hello world!</p>"
                },
                "geometry": {
                  "coordinates": [
                    1741.5,
                    1000.5
                  ],
                  "type": "Point"
                },
                "id": 0
              },
              {
                "type": "Feature",
                "properties": {
                  "name": "Test2",
                  "group": "village",
                  "image": "test.png",
                  "popupcontent": "<p>different popup!</p>"
                },
                "geometry": {
                  "coordinates": [
                    1800,
                    1200
                  ],
                  "type": "Point"
                },
                "id": 1
              }
            ]
          }
    ]
  };

  //Create dynamic popups from GeoJSON
 L.geoJSON(geojson).bindPopup(function(layer) {
    return '<h3>' + layer.feature.properties.name + '</h3>' 
    + '<p>' + layer.feature.properties.popupcontent + '</p>';
  }).addTo(map);

var image = L.imageOverlay('images/volucris_map_BASE.png', bounds).addTo(map);

//Trigger console on click
var marker = L.marker([1800, 1000],{title: "Title" }  ).addTo(map);
marker.bindPopup("This is popup content");
marker.on('click', onClick);

function onClick(e) {
   var popup = e.target.getPopup();
   var content = popup.getContent();

   console.log(content);
   postToSidebar(content);
}

function postToSidebar(content) {
    document.getElementById('sidebar-popup-content').innerHTML = content;
    sidebar.open('home');
}```

So what I do have working is when I add a manual popup with the L.marker I successfully have posted the single property to the content box and opened the sidebar on click. This works great, however I need a way to get this to work with the dynamic geoJSON markers along with multiple parameters. What could I use to pass from the popup bind to the onClick/postToSidebar? 

I also tried using a click event from leaflet documentation but they don't have a marker specific one from what I'm searching. I've searched over some of the similar stackoverflow topics as well for this same topic but nothing seems to use the stack I am using. Most are able to achieve this with React but I am limited to doing this in raw html/js due to where it will be placed in the future.