JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="navDiv">
        <ul id="navButtons">
            <li><a href="">Home</a>
            </li>
            <li><a href="">Clients</a>
            </li>
            <li><a href="">Entries</a>
            </li> <span><li><a href="">Account</a></li></span>

        </ul>
    </div>
    <div id="newCltDiv">
        <input id="newClt" type="text" placeholder="Add a new client">
        <button id="addCltBtn">Add Client</button>
    </div>
    <br>
    <br>
    <div id="cltListDiv">
        <select id="cltList">
            <option>Select an existing client</option>
        </select>
    </div>
    <br>
    <br>
    <div id="test"></div>

JavaScript

var clientArray = [];
 var clientInput = document.getElementById("newClt");
 var sel = document.getElementById("cltList");

 document.getElementById("addCltBtn").onclick = function () {
     console.log(clientArray.length);
     if (!contains(clientArray, clientInput.value)) {
         clientArray.push(clientInput.value);
         console.log("Objects: " + clientArray.join(", "));
         updateDropList();
     } else alert("You already have a client by that name!");
 }


 function updateDropList() {
     var lastKey = clientArray.length-1;
     var opt = document.createElement('option');
     opt.innerHTML = clientArray[lastKey];
     opt.value = clientArray[lastKey];
     sel.appendChild(opt);
 }


 function contains(a, obj) {
     for (var i = 0; i < a.length; i++) {
         if (a[i] === obj) {
             return true;
         }

     }
     return false;
 }