Jquery code does not work

See more:

jQuery

HTML5

Hello, mabey somebody can Help I try to make this code with the example code to work, however i it does nothing and I asking myself what do i do wrong.

The code should make the input border red or green, when somebody enters a word that match to the datalist, or not (then it is red)

let btn = $("#btnSend");
let form = $("#zeForm");
let input = $("#zeInput");
let msg = $("#msg");
let allowedValues = ["atown", "btown", "ctown"]; // same values as the options in your datalist


btn.on('click' , function() {
    let allGood = false;

    allowedValues.each(function(index, element) {
        if (element === input.value) {
            allGood = true;
            return;
        }
    })

    if (allGood) {
        msg.text("Success!!");
        msg.attr('style',"color:green");
        //form.submit();
    } else {
         msg.text("This value is not accepted";
         msg.attr('style',"color:red");
    }
   msg.attr('style',"display:inline");

});

The html code for test:
<pre lang="HTML">
<pre><form id="zeForm">
    <input id="zeInput" type="text" list="typ" name="name" placeholder="gtown" > 
        <datalist id="typ">
            <option value="atown">atown</option> 
            <option value="btown">btown</option> 
            <option value="ctown">ctown</option> 
        </datalist> 
    </input>
    <p id="msg"></p>
    <button id="btnSend" type="button">send</button>
  </form>

What I have tried:

I had before an javaskript code which I try to translate in jquery, however until now the jquery code does not work with the example, but the javaskript code does. see:

How to convert this javascript code to jquery[^]