Geoip Span city not working second time - geoip

Question

this is seriously bugging me since last week. i am making a webpage and have to use several times. but only thing is, when i use that code a second time, it will not display the CITY name output.
Here is the code i am using. what m i doing wrong?
In this code, when you run it, you will notice that it will only display your city 1 time, second code wont run for some reason. I hope i am clear in what i am asking. feel free to ask any questions.
This is scripts part:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://js.maxmind.com/js/apis/geoip2/v2.1/geoip2.js" type="text/javascript"></script>
<script>
var onSuccess = function(geoipResponse) {
var cityElement = document.getElementById('city');
if (cityElement) {
cityElement.textContent = geoipResponse.city.names.en || 'Unknown city';
}
var countryElement = document.getElementById('country');
if (countryElement) {
countryElement.textContent = geoipResponse.country.names.en || 'Unknown country';
}
};
var onError = function(error) {
window.console.log("something went wrong: " + error.error)
};
var onLoad = function() {
geoip2.city(onSuccess, onError);
};
// Run the lookup when the document is loaded and parsed. You could
// also use something like $(document).ready(onLoad) if you use jQuery.
document.addEventListener('DOMContentLoaded', onLoad);
</script>
This is body part:
<span id="country"></span> <span id="city"></span><span id="city"></span>

Answer 1

Thanks for the help, as you suggested, copying the
var cityElement = document.getElementById('city');
and renaming to city2 on the second code worked for me. this is a simple workaround but works for me.
Thanks :)