Secure write back possible in custom visual?

// inside the custom visual contructr

document.body.innerHTML = '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>'
+'<input id="txtname" type="text" /></p>'
+'<input id="InsertRecord" type="button" value="Insert"></input>'

let bttnClick = document.getElementById("InsertRecord");
bttnClick.addEventListener("click", (e: Event) => this.getCall());

// out side the constructor and inside the visual class

getCall(){

$(function() {
$.getJSON("https://api.ipify.org?format=jsonp&callback=?",
function(json) {
document.write("My public IP address is: ", json.ip);
console.log(json.ip)
}
);
});
}

I used the above to call an web api that returns the public IP to console and I am getting the below error

API Reference : https://www.ipify.org/

Uncaught TypeError: $ is not a function
at Visual.getCall (<anonymous>:627:25)
at HTMLInputElement.<anonymous> (<anonymous>:614:89)

I might be missing jquery reference somewhere, but I couldn't figure it out. Any help would be greatly appreciated, thanks in advance.