如何防止添加到Javascript数组的元素被覆盖？

Question

I currently have addToClients() that adds a new element to the clients array when the button is being pressed. I want to add the new value to clients whenever the button is pressed, and have the value maintain in the array even after we input a new element(so I can use the autocomplete feature of jQuery).
However, now whenever I press submit again, the previous element being added is being overridden by the new element, so I can't keep it in the array (FYI clients array is in a separate js file from this html file that contains these code). Is there any problem in my implementation?
Here is what the html page looks like:

function addToClients(){
            if (!($("#client-name").val() in clients)){
                clients.push($("#client-name").val())
            }
        }

The HTML code related to this part is here:

<input type = "text"
                 id = "client-name"
                 onkeypress="auto()" 
                 placeholder="Client">
         <input type = "text" id = "reams" placeholder="#reams">
         <button id="btn"> Submit</button> 

Here is the array in a separate js file linked to the HTML

 clients = [
          "Shake Shack",
          "Toast",
          "Starbucks",
    ];

Answer 1

Maybe this will do:

if (jQuery.inArray( $("#client-name").val(), clients ) == -1){
     clients.push($("#client-name").val())
 }

Answer 2

You can use includes which will check value have exist in array then return true or false ...

 var arr = [1,4,7]; var added = 4; if(!arr.includes(added)) { arr.push(added); } console.log(arr);