title: Jquery Dynamically update select from input
body: <p>I need little help with this I tried updating select option with user input but it only shows empty option. Here's my code and a jsfiddle link</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>$("#select").append($("&lt;option&gt;&lt;/option&gt;").val("Clothes").html("Clothes"));
  
  $("#butt").click(function() {
    var bla = $('#category').val();
    var valll = $('#category').attr('value');
    $("#select").append($("&lt;option&gt;&lt;/option&gt;").val(valll).html(valll));
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" placeholder="Category" name="category_name" id="category" /&gt;
  &lt;button class="btn btn-primary" name="add_category" id="butt"&gt;Add&lt;/button&gt;
  &lt;select id="select"&gt;&lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/Rhyno_xD/Lu3e9krz/2/" rel="nofollow">jsfiddle link</a></p>