How to show or hide element based on Geo ip

I have this script to give me the Geo Location, like "CA" or "US". I want to show a specific into in my html base on the user location. Any suggestions?

HTML:

<div id="ip">Loading...</div>
<div id="country_code"></div>
<div id="country_code">Hello Canada</div>
<div id="country_code">Hello USA</div>


<script>
    $.get("https://freegeoip.net/json/", function (response) {
        $("#ip").html("IP: " + response.ip);
        $("#country_code").html(response.country_code);
    }, "jsonp");
    document.getElementById("US").style.display = "block";
    document.getElementById("CA").style.display = "block";
</script>

CSS:

#US { text-align: left; color: blue; display:none;} 
#CA { text-align: left; color: blue; display:none;} 

JSfiddle

As commented, a simple if condition will work.

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

#US { text-align: left; color: blue; display:none;} 
#CA { text-align: left; color: blue; display:none;} 

<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="CA">THE CA</div>
<div id="US">THE US</div>

UPDATE: 15/12/2018

http://freegeoip.net Has shutdown. I have updated the url with https://freegeoip.app