title: Dynamically add and remove TextBoxes and get value of dynamic TextBox using jQuery
body: <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>