Dynamically add and remove TextBoxes and get value of dynamic TextBox using jQuery
<p>I have a problem. The code below is for adding and removing textbox dymically through <code>.append()</code> and <code>.remove()</code>. I want all the data inside the textboxes with a placeholder of <em>textbox</em> will be imploded and will be placed in the textbox I set with name of <em>textbox</em>. Also the ones with the placeholder of <em>box</em> will be placed in the allotted textbox for it. How to do that?</p>

<p>Here's my code:</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;form class="form-horizontal" method= "Post"&gt;
    &lt;div class="control-group"&gt;
        &lt;div class="inc"&gt;
            &lt;div class="controls"&gt;
                &lt;input type="text" class="form-control" name="textbox" placeholder="textbox"/&gt; 
                &lt;input type="text" class="form-control" name="text" placeholder="text"/&gt;
                &lt;button style="margin-left: 50px" class="btn btn-info" type="submit" id="append" name="append"&gt;
                Add Textbox&lt;/button&gt;
                &lt;br&gt;
                &lt;br&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;input type="submit" class="btn btn-info" name="submit" value="submit"/&gt; 
        &lt;input type="text" class="form-control" name="textbox" placeholder="texbox"/&gt; 
    &lt;input type="text" class="form-control" name="text" placeholder="text"/&gt;
    &lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p><strong>JavasScript</strong>:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    jQuery(document).ready( function () {
        $("#append").click( function() {
        $(".inc").append('
            &lt;div class="controls"&gt;
                &lt;input class="form-control" type="text" name="textbox" placeholder="textbox"&gt;
                &lt;input class="form-control" type="text" name="text" placeholder="text"&gt;
                &lt;a href="#" class="remove_this btn btn-danger"&gt;remove&lt;/a&gt;
                &lt;br&gt;
                &lt;br&gt;
            &lt;/div&gt;');
        return false;
        });

    jQuery('.remove_this').live('click', function() {
        jQuery(this).parent().remove();
        return false;
        });
    });
&lt;/script&gt;
</code></pre>