title: How do I allow the user to create their own option
body: <p>So I've got a couple lines of code that give the user the option to pick a start and endpoint, once picked they click the link and are redirected to a google maps page that already has the directions set out for them. I'm trying to add a function that enables the user to save their own options as locations. Without context this makes little sense so heres my code:</p>
  
  <pre><code>&lt;DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script&gt;
      function updateNavigationLink() {
          var link = "https://maps.google.com/maps?saddr=" +
              encodeURIComponent(document.getElementById("start").value)      +
              "&amp;daddr=" + encodeURIComponent(document.getElementById("end").value);
          document.getElementById("navigationLink").href = link; 
      }
  &lt;/script&gt;
  
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;ISHGUIDE&lt;/title&gt;
  &lt;/head&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  
  &lt;div class=naviselection&gt;
      Start:
      &lt;input type='text' list='startinput' id="start" onchange="updateNavigationLink()" /&gt;
      &lt;datalist id="startinput" &gt;  
      &lt;option value="The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag"&gt;School&lt;/option&gt;
      &lt;option value="Centrum, Den Haag"&gt;City Center&lt;/option&gt;      
  &lt;/datalist&gt;   
  
      End:
      &lt;input type="text" id="end" list="endinput" onchange="updateNavigationLink()"/&gt;
          &lt;datalist id="endinput" &gt;
          &lt;option value="The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag"&gt;School&lt;/option&gt;
          &lt;option value="Centrum, Den Haag"&gt;City Center&lt;/option&gt;      
      &lt;/datalist&gt;
  &lt;/div&gt;
  
  &lt;div class=Finallink&gt;
      &lt;a id="navigationLink"&gt;NAVILINK&lt;/a&gt;         
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I would like to create a function in which the user is provided the ability to save locations as different options for example:</p>
  
  <p>Location: PUT LOCATION HERE<br>
  Name: PUT NAME HERE</p>
  
  <p>They could put their house address in the location bar and "home" in the option bar. Then, this line of code would be added to my script:</p>
  
  <pre><code>&lt;option value="house address"&gt;HOME&lt;/option&gt;
  </code></pre>
  
  <p>How would I go about creating this function and ensuring it works as I would like it to.</p>
  
  <p>Thank you for your help it is very much appreciated. </p>