Код Jquery не работает

---

Здравствуйте, Мэйби, кто-нибудь может помочь мне сделать этот код с примером кода для работы, однако я ничего не делаю, и я спрашиваю себя, что я делаю не так.

Код должен сделать входную границу красной или зеленой, когда кто-то вводит слово, которое соответствует даталисту, или нет (тогда оно красное)

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>

Что я уже пробовал:

Раньше у меня был код javaskript, который я пытаюсь перевести в jquery, однако до сих пор код jquery не работает с примером, но код javaskript работает. видеть:

Как преобразовать этот код javascript в jquery[^]

---