title: What is the right way to repeat html controls with a delete
body: <p>I am trying to make a repeater html textbox controls which will add another field under it with a delete btn. The "+add more" working fine but the delete btn also adding more controls under it. </p>
  
  <p>I want to know the right way to achieve it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
  
    $('.btn-add-phone').click(function() {
      var sInputGroupPhoneHtml = ('&lt;div class="form-group form-group-options"&gt;&lt;div class="input-group input-group-option col-xs-12"&gt;&lt;input type="text" name="option[]" class="form-control" placeholder="Phone Number" style="width:50%"&gt;&lt;select class="form-control" style="width:50%"&gt;&lt;option value="Work"&gt;Work&lt;/option&gt;&lt;option value="Home"&gt;Home&lt;/option&gt;&lt;option value="Mobile"&gt;Mobile&lt;/option&gt;&lt;option value="Other"&gt;Other&lt;/option&gt;&lt;/select&gt;&lt;span class="input-group-addon input-group-phone-remove text-left"&gt; &lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;');
  
      $(this).append(sInputGroupPhoneHtml);
  
    });
  
    $('.btn-add-email').click(function() {
      var sInputGroupEmailHtml = ('&lt;div class="form-group form-group-options"&gt;&lt;div class="input-group input-group-option col-xs-12"&gt;&lt;input type="email" name="option[]" class="form-control" placeholder="Email" style="width:50%"&gt;&lt;select class="form-control" style="width:50%"&gt;&lt;option value="Work"&gt;Work&lt;/option&gt;&lt;option value="Personal"&gt;Personal&lt;/option&gt;&lt;option value="Other"&gt;Other&lt;/option&gt;&lt;/select&gt;&lt;span class="input-group-addon input-group-email-remove text-left"&gt; &lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;');
  
      $(this).append(sInputGroupEmailHtml);
  
    });
  
    $('.input-group-email-remove').click(function() {
      $(this).parent().remove();
    });
  
  
  
    jQuery(".toggleControlsPhone a").click(function() {
      jQuery(".showPhoneControls").toggle();
    });
  
    jQuery(".toggleControlsEmail a").click(function() {
      jQuery(".showEmailControls").toggle();
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.input-group-option:last-child input.form-control {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
  }
  
  div.input-group-option span.input-group-addon-remove {
    cursor: pointer;
  }
  
  div.input-group-option {
    margin-bottom: 3px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" /&gt;
  
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
  &lt;div class="form-group" id="phoneAddMore"&gt;
    &lt;label class="control-label"&gt;Phone&lt;/label&gt;
    &lt;div class="form-group form-group-options"&gt;
      &lt;div class="input-group input-group-option col-xs-12"&gt;
        &lt;input type="text" name="option[]" class="form-control" placeholder="Phone Number" style="width:50%"&gt;
        &lt;select class="form-control" style="width:50%"&gt;
          &lt;option value="Work"&gt;Work&lt;/option&gt;
          &lt;option value="Home"&gt;Home&lt;/option&gt;
          &lt;option value="Mobile"&gt;Mobile&lt;/option&gt;
          &lt;option value="Other"&gt;Other&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
      &lt;a hre="#" class="btn-add-phone"&gt;+ add more &lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="clearfix"&gt;&lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/2uqxav83/" rel="nofollow noreferrer">View on JSFiddle</a></p>