I have a call icon that when clicked should call another function defined in an external JavaScript file

Below is the relevant excerpt from the html code

<!--Angular, JQuery and External JS file defined-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://vmap.com.au/portal/assets/quickstart.js"></script>

<!--Form with call button-->
<form>
<input id="phone-number" type="hidden" value="<?=$phone?>"/>
<a role="button" id="button-call" type="submit"><i class="icon-call-out"></i></a>
</form>

Then we have the external quickstart.js file defined with below sample code

$(function () {
const callButton = document.getElementById("button-call");
callButton.onclick = (e) => {
    e.preventDefault();
    makeOutgoingCall();
  };

async function makeOutgoingCall() {
    alert("Test");
    }
});

<!--At the bottom of the page -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

I am expecting makeOutgoingCall to be called and Test alert to be triggered. But there is no activity in the console, nothing seem to be happening - No errors, no actions.