I am using Leaflet JS and Django to create a map website. I have markers on the map showing correctly and I'm trying to display a table in a seperate div beside the map displaying information that would be in the popup.

I am also using a Django REST api to store marker data such as lat & long, names etc. My api returns this:

[
    {
        "id": 2,
        "cube": "Industrial Cube North",
        "cubeurl": "https://dcwppntise010.edc.nam.gm.com/admin/login.jsp",
        "hostname": "acrptisepsn01",
        "domain": "nam",
        "personas": "Policy Service",
        "ip": "10.36.139.120",
        "structurename": "Rochester COMP",
        "streetaddress": "1000 Lexington Ave",
        "latitude": 43.18226,
        "longitude": -77.65599
    },

I fetch data from my API like:

            {% for item in data %}
            var marker = L.marker([{{item.latitude}},{{item.longitude}}]).bindPopup("<strong>{{item.hostname}}</strong><br/>{{item.personas}}").addTo(map).on('popupopen', function (e) {
                    console.log(e.popup.getContent())
            });;
            {% endfor %}

It logs the content in the console but don't know how to dynamically change info in the table for each marker (they have different info & locations)

I have seen examples such as: http://www.gistechsolutions.com/leaflet/DEMO/baseball/BaseballPanel.html

That uses GeoJson and I'm not sure how to apply the same logic to my setup.

Thank you!

EDIT - I've looked into on click functions in Javascript to capture the popup info in variables and return it but I get undefined as the result, leading me to think you can't do that with Django

I need a table like this: