On Refresh, newly added element in array is removed from the array list itself
<p>When ever I add new element in an array, it gets added successfully but when I refresh the browser, the added element gets removed from the list itself. here is my code snippet.</p>

<pre><code>&lt;html&gt; 
    &lt;label&gt;Enter an New item to add in Stock&lt;/label&gt; &lt;br&gt; &lt;/br&gt; 
    &lt;input type="text" name=" itemName" id="addItemInStock&gt;&lt;br&gt;&lt;/br&gt;
    &lt;p id="errorMsg"&gt;&lt;/p&gt; 
    &lt;button onclick="addToStock()" return="false"&gt;Add&lt;/button&gt;
    &lt;p id="showList"&gt;&lt;/p&gt; 
    &lt;select id="showInDropDown"&gt;
        &lt;option value="" disabled selected style="display: block;"&gt;Stock Items&lt;/option&gt;
    &lt;/select&gt;

&lt;script&gt;
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.getElementById("showList").innerHTML = fruits;
    var newItem = document.getElementById("addItemInStock");

    function addToStock(){
        if ((newItem.value) === ""){
            document.getElementById("errorMsg").innerHTML = "Blank item cannot be added!!";
            document.getElementById("errorMsg").style.display = "block";
        }
        else{
            document.getElementById("errorMsg").style.display = "none";
            fruits.push(newItem.value);
            document.getElementById("showList").innerHTML = fruits;
            clearAndShow();
        }
        var sel = document.getElementById("showInDropDown");
        document.getElementById("showInDropDown").innerHTML = "";
        for (var i = 0; i &lt; fruits.length; i++)
        {
            var opt = document.createElement('option');
            sel.appendChild(opt);
        }
    }

    function clearAndShow(){
        newItem.value = "";
    }
&lt;/script&gt;

&lt;/html&gt;
</code></pre>