title: Adding variable name instead of value of variable to select list
body: <p>I'm trying to add new options to the select tag, but my code is adding the variable name addedFont instead of the actual number (i.e. 20 pixels)</p>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>$("#add-font-size").click(function(){
      var addedFont = $("#fontSizeInput").val();
      $("#font-select").append("&lt;option value = addedFont&gt; addedFont pixels &lt;/option&gt;");
  });
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="font-select"&gt;
      &lt;option value="16" selected&gt;16 pixels&lt;/option&gt;
      &lt;option value="17"&gt;17 pixels&lt;/option&gt;
      &lt;option value="18"&gt;18 pixels&lt;/option&gt;
      &lt;option value="19"&gt;19 pixels&lt;/option&gt;
      &lt;option value="20"&gt;20 pixels&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p><strong>Selector's options after adding font size 21:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/teEWos.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/teEWos.png" alt="enter image description here"></a></p>