i am trying to make a marker in leaflet work. I work on a Flask web application that supposed to have a html link in the popup in a marker. The map works, the maker can be added. But when inserting a attribute it shows as a string or something. it wont show as a link.

This is my html file with my javascript tag in it:

HTML + Javacript

var map = L.map('map').setView([52.3, 5], 9);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
                attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
                maxZoom: 16,
                minZoom: 6,
                id: 'mapbox/streets-v11',
                tileSize: 512,
                zoomOffset: -1,
                accessToken: 'pk.eyJ1Ijoia2V2aW4tc2NoZWxsaW5nZXIiLCJhIjoiY2wzNDhoMmJkMDA4cTNjbDd3MjdkODZ3ZCJ9.iLrs644NuUNBMeheczVhFA'
}).addTo(map);
        
{% for marker in markers %}
L.marker([{{ marker['lat'] }}, {{ marker['lon'] }}]).addTo(map).bindPopup("{{ marker['popup'] }}")
{% endfor %}

This is my route that shows the map: Route Flask

@main.route("/map")
@login_required
def map():

    url = url_for('main.summary')
    
    markers = []
    
    damages = Damage.query.all()
    for damage in damages:
        marker = {'lat':damage.latitude, 'lon': damage.longitude, 'popup': '<a href="#">Visit W3Schools.com!</a>'}
        markers.append(marker)
    return render_template('map.html', title='Map view', markers=markers)

When looking in the browser and showing it as html it shows this as popup in the elements:

<div class="leaflet-popup-content" style="width: 208px;">&lt;a href="#"&gt;Visit W3Schools.com!&lt;/a&gt;</div>

So it renders the < and > as text....