create a dynamic select with options in Javascript

Hello I have tried to create a dynamic Javascript select with their options, but it isn't works :(. I have try it with my json-Array but in the console comes this following error: "Uncaught ReferenceError: $ is not defined at test.js:4" my js:

let data=[{"short":"vw","full":"volkswagen"},
{"short":"mrcs","full":"mercedes"}];

$(document).ready(function(){
    generateOptions(data);
});

function generateOptions(data){
var selectList = document.getElementById('mySelect');

//Create and append the options
for (var i = 0; i < data.length; i++) {
    var option = document.createElement("option");
    option.value = data[i].short;
    option.text = data[i].full + " ("+data[i].short+")";
    selectList.appendChild(option);
}
}

my html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="test.js"></script>
    <link rel="stylesheet" href="test.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
</head>
<body>
  <select id="mySelect">

  </select>
</body>
</html>