I'm making a simple Gazetteer application. I open a modal by clicking on a marker which opens up with a photo of the city the marker is on.

It works as intended the first time I select a city. Any subsequent times clicking any marker will loop through the modal code as many times as it has been opened previously.

markers.on('click', function (e) {
    city = e.layer.options.title
    $('#myModal').on('show.bs.modal', function (event) {
        //BELOW THIS LINE IS WHERE LOOPING OCCURS
        var modal = $(this);
        $.when(runAjax('City Reference', 'source/php/getCityInfo.php', 'POST',city))
        .then(function() {
             cityReference = ajaxResponse.place_id;
             $.when(runAjax('Photo Reference', 'source/php/getPhotoRef.php', 'GET', cityReference))
             .then(function() {
                 photoReference = ajaxResponse.photoR;
                 modal.find('.modal-body').html('<img src=https://maps.googleapis.com/maps/api/place/photo?photoreference=' + photoReference + '&input=green%20lanes&sensor=false&types=(regions)&key=<<<HIDDEN>>>&maxwidth=400&maxheight=400></div>');
            });
        });
        
        modal.find('.modal-title').html('<b>' + city + '</b>');
    }) // ABOVE THIS LINE IS WHERE LOOPING STOPS
    $('#myModal').modal('show');
});

I have no understanding as to why this is happening.