title: cant get textbox value with space - jquery
body: <p>I have a text box and a button , I writed a script that when clicked on button , create new textbox and Add it to form .</p>
  
  <p>but when I have text Like <code>32 bit</code> and clicked on button It created a textbox with value like <code>32</code> .  I get inspect element and result was :</p>
  
  <pre><code>&lt;input type="text" name="Options" class="field-input add-more" value="32" bit=""&gt;
  </code></pre>
  
  <p>my script:</p>
  
  <pre><code> $("#add-more").click(function(e){
      e.preventDefault();
      var text = $("#more-text");
  
      var newTag = '&lt;div class="col-lg-3"&gt;&lt;input type="text" name="Options" class="field-input add-more" value='+ text.val() + ' /&gt;&lt;span class="btn-sm btn-danger remove-me field-input"&gt;x&lt;/span&gt;&lt;/div&gt;';
      $("#frm-fields").append(newTag);
      text.val("");
  });
  </code></pre>
  
  <p><strong>please see below example .</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> $("#add-more").click(function(e){
          e.preventDefault();
          var text = $("#more-text");
  
          var newTag = '&lt;div class="col-lg-3"&gt;&lt;input type="text" name="Options" class="field-input add-more" value='+ text.val() + ' /&gt;&lt;span class="btn-sm btn-danger remove-me field-input"&gt;x&lt;/span&gt;&lt;/div&gt;';
          $("#frm-fields").append(newTag);
          text.val("");
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="row "  id="div-fields"&gt;
              &lt;div class="col-lg-12"&gt;
                  
                  &lt;div class="form-horizontal" id="frm-fields-options"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;div class="input-group"&gt;
                              &lt;input type="text" class="form-control" id="more-text" /&gt;
                              &lt;div class="input-group-addon"&gt;
                                  &lt;span class="btn btn-sm btn-success" id="add-more"&gt;+&lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div id="frm-fields" class="row"&gt;
                       
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
           
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>