title: How to add more fields using jQuery?
body: <p>I have a 3 input fields with <strong>+Add More</strong> Button. I want to add more fields when <strong>+Add More</strong> button is pressed.</p>
  
  <p>When New field will create there should be a remove button to remove newly added row and new row can be create by using <strong>+Add More</strong> button. </p>
  
  <p>For that I am using following html and jQuery code but can't get the idea how to add / remove fields !</p>
  
  <p><strong>html and jQuery Code</strong></p>
  
  <pre><code>&lt;div id="tab_logic" class="after-add-more"&gt;
      &lt;div class="col-md-4"&gt;                                
          &lt;div class="form-group"&gt;
              &lt;label class="control-label"&gt;Logger Name&lt;/label&gt;
              &lt;input maxlength="200" type="text" class="form-control" placeholder="Enter Logger Name" name="lg_name[]" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
          &lt;div class="form-group"&gt;
              &lt;label class="control-label"&gt;Logger Serial Number&lt;/label&gt;
              &lt;input maxlength="200" type="text" class="form-control" placeholder="Enter Serial Number" name="lg_sl[]" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3"&gt;
          &lt;div class="form-group"&gt;
              &lt;label class="control-label"&gt;Modem Serial Number&lt;/label&gt;
              &lt;input maxlength="200" type="text" class="form-control" placeholder="Enter Modem Serial Number" name="lg_md_sl[]" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="remove-button"&gt;&lt;/div&gt;
  &lt;/div&gt;  
  &lt;div class="col-md-2"&gt;
      &lt;div class="form-group change"&gt;
          &lt;label for=""&gt;&amp;nbsp;&lt;/label&gt;&lt;br/&gt;
          &lt;a class="btn btn-success add-more"&gt;+ Add More&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="more-feilds"&gt;&lt;/div&gt;
  
  $(document).ready(function() {
      $(".add-more").click(function(){ 
          var html = $("#tab_logic").html();
          $(".more-feilds").append(html);        
      });
  
      $("body").on("click",".remove",function(){ 
          $(this).parents("#tab_logic").remove();
      });
  });
  </code></pre>
  
  <p><strong>Update :</strong> </p>
  
  <p>I have updated my html and jquery code. Now I have +Add More button. When I pressed the button it's adding 3 new input fields which I want. But I want to add remove button to each newly created 3 fields to remove it.  </p>
  
  <p>How can I do this ?</p>