title: Add/Remove Input Fields Dynamically with jQuery
body: <p>I am looking to add and remove duplicate input fields using Jquery- </p>
  
  <p>This is my HTML: </p>
  
  <pre><code>&lt;div class="col-sm-9"&gt;
      &lt;div class="input_wrap"&gt;
          &lt;div&gt;&lt;input type="text" name="text[]" class="form-control"&gt;&lt;/div&gt;   
  
          // **** Here I want to add div using Jquery **** //
  
          &lt;button class="add_field_button btn btn-info"&gt;Add More Subcategory&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my Jquery: </p>
  
  <pre><code>var wrapper         = $(".input_wrap"); 
  var add_button      = $(".add_field_button"); 
  
  $(add_button).click(function(e){ 
    e.preventDefault();
    $(wrapper).prepend('&lt;div&gt;&lt;input type="text" name="text[]" class="form-control"&gt;&lt;a href="#" class="remove_field"&gt;Remove&lt;/a&gt;&lt;/div&gt;'); //add input box
  });
  </code></pre>
  
  <p>When I using this Jquery its always add <code>div</code> below the <code>.input_wrap</code> DIV. But I want to add <code>DIV</code> to the place I have shown in my HTML Code. </p>
  
  <p><strong>UPDATE:</strong> This is the way I want to get 
  <img src="https://i.stack.imgur.com/ZwqnI.png" alt="enter image description here">
  Hope somebody may help me out. 
  Thank you. </p>