GEO IP based content display

I have added the below code into this page so that I can display specific content when people come from India. But it is not working as needed. In the head section

    <script>
            $.get("https://freegeoip.app/json/", function (response) {
    $("#ip").html("IP: " + response.ip);
    $("#country_code").html(response.country_code);
    if(response.country_code=='US'||response.country_code=='UK'||response.country_code=='IN'){
        document.getElementById(response.country_code).style.display = "block";
    }
}, "jsonp");
        </script>
        <style>
            #US {display:none;}
            #UK {display:none;}
            #IN {display:none;}
        </style>

& in the body section

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                                        <div id="ip">Loading...</div>
<div id="country_code"></div>
<div id="US">THE US</div>
<div id="UK">THE UK</div>
<div id="IN">THE IN</div>

Please help with the correct code. This can be at present viewed here

Answer

You’re trying to use jQuery’s API before it’s loaded. Just move the jQuery CDN to the top of your embedded code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $.get("https://freegeoip.app/json/", function(response) {
    $("#ip").html("IP: " + response.ip);
    $("#country_code").html(response.country_code);
    
    if (response.country_code == 'US'
      ||response.country_code == 'UK'
      ||response.country_code == 'IN') {
      document.getElementById(response.country_code).style.display = "block";
    }
  }, "jsonp");
</script>