Style applied inside modal-body to statical divs only

Here’s my modal:

<div class="modal" id="wndLocations" tabindex="-1" role="dialog" aria-labelledby="wndLocationsCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="wndLocationsLongTitle">Locations</h5>
            </div>
            <div class="modal-body">

                <div class="divLocation">Germany</div>

            </div>
            <div class="modal-footer modalFooter">
                <button type="button" class="btn btn-primary primaryActionBackground" data-bs-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

If I show the modal as written above and without tampering with it after releasing and running my web application, the divLocation style is applied to the “Germany” text, e.g. it gets a red background.

If I press a button, remove <div class="divLocation">Germany</div> and add instead <div class="divLocation">Belgium</div> before showing my modal, no red background is being added (although Chrome shows that the HTML is the same).

What am I missing?