Need help coding for Jquery result

Need help coding for Jquery result

Not sure if this is the correct forum for my question, if not please recomend where to go.

I need to have the “city” result from the web address https://freegeoip.net/json/ post in my website when a visitor lands on my landing page. Below is the JQuery/javascript and html I am attempting to use with no luck. I am using wordpress with Generatepress theme.

Note: Below javascript code is being place in the first block of the footer section.
<script>
$(document).ready(function(){
$.get(" https://freegeoip.net/json/", function(data) {
var element = $('#city');
if (data.city != '') {
element.text(data.city);
} else {
element.text(data.region_name);
}
});
});
</script>

Note: Below html is being placed in the body section of my web page.
<h1 class="headline">Want to attend an event near <span id="city" ></span>?</h1>

The result showing on my web page is:
“Want to attend an event near ?”

I want it to show:
“Want to attend an event near “city”?”

Please advise.