cant get textbox value with space - jquery
<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>