title: Adding user input to an array and updating option list
body: <p>So I have this page:</p>
  
  <p>I have a list that is made from items in array. If user adds new food the input should go to the array and show new item in the list and the input field should dissapear. Right now I am getting 404 error.</p>
  
  <p>How can I do this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// find elements
  var banner = $("#banner-message")
  var button = $("button")
  
  var select = document.getElementById("selectFood");
  var options = ["Pizza", "Hambruger", "Salad"];
  
  for (var i = 0; i &lt; options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
  }
  
  function foodInput() {
    boxvalue = document.getElementById('addedFood').value;
    options.push(boxvalue);
  }
  
  function addFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "block") {
      x.style.display = "none";
    } else {
      x.style.display = "block";
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
  }
  
  #banner-message {
    background: #778899;
    border-radius: 4px;
    padding: 20px;
    font-size: 25px;
    text-align: center;
    transition: all 0.2s;
    margin: 0 auto;
    width: 300px;
  }
  
  
  button {
    background: #A52A2A;
    border: none;
    border-radius: 5px;
    padding: 8px 14px;
    font-size: 15px;
    color: #fff;
  }
  
  .addButton {
    background: #A52A2A;
    color: white;
  }
  
  #banner-message.alt {
    background: #0084ff;
    color: #fff;
    margin-top: 40px;
    width: 200px;
  }
  
  #banner-message.alt button {
    background: #fff;
    color: #000;
  }
  
  .hide {
    display: none;
  }
  
  .show {
    display: block;
  }
  
  .demo {
    background: #A52A2A;
    border: none;
    border-radius: 5px;
    padding: 8px 14px;
    font-size: 15px;
    color: #fff;
  }
  
  #myDIV {
    background: #778899;
    padding: 20px;
    font-size: 25px;
    text-align: center;
    transition: all 0.2s;
    margin: 0 auto;
    width: 300px;
    display: none;
  }
  
  input[type=submit] {
    background: #A52A2A;
    border: none;
    border-radius: 5px;
    padding: 8px 14px;
    font-size: 15px;
    color: #fff;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="banner-message"&gt;
    &lt;p&gt;My favorite food&lt;/p&gt;
    &lt;select id="selectFood"&gt;
      &lt;option&gt;Select food&lt;/option&gt;
    &lt;/select&gt;
    &lt;button&gt;Choose&lt;/button&gt;
    &lt;br&gt;
    &lt;button id="addButton" onclick="addFunction();"&gt;
      Add new food
    &lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div id="myDIV"&gt;
    &lt;form onsubmit="return foodInput()"&gt;
      &lt;input type="text" id="addedFood" placeholder="Type food"&gt;
      &lt;input type="submit" value="Submit" onclick="addFunction()"&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>