title: How to remove appended elements with dynamic id
body: <p>I have this code to automatically fill up phrases below as you type inside the text boxes.</p>
  
  <p>If you click "add person", it will append text boxes and a phrase for the new person. You can type their info and it will still automatically fill up new phrases.</p>
  
  <p>I added also a remove button for each new added person. It removes the text boxes and the phrase below for the respective person.</p>
  
  <p>As you will see, <strong>there is a problem</strong>: when you click "remove", it won't delete "<em>Bye, {name}</em>"</p>
  
  <p>I have commented my code so you can help me. How do I select the "third appended element" ("<em>Bye, {name}</em>") to remove it too?</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> var name1 = document.getElementById('name');
   name1.addEventListener('input', function() {
     var result = document.querySelector('span.one');
     result.innerHTML = this.value;
   });
   
    var name1 = document.getElementById('name');
   name1.addEventListener('input', function() {
     var result = document.querySelector('span.four');
     result.innerHTML = this.value;
   });
  
   var name1 = document.getElementById('city');
   name1.addEventListener('input', function() {
     var result = document.querySelector('span.two');
     result.innerHTML = this.value;
   });
  
   var name1 = document.getElementById('age');
   name1.addEventListener('input', function() {
     var result = document.querySelector('span.three');
     result.innerHTML = this.value;
   });
  
   $(document).ready(function() {
     var max_fields = 5; //maximum input boxes allowed
     var wrapper = $(".input_fields_wrap"); //Fields wrapper
     var add_button = $(".add_field_button"); //Add button ID
     var input_container = $(".container"); // holds all input containers
  
     var x = 1; //initlal text box count
  
     $(add_button).click(function(e) { //on add input button click
       e.preventDefault();
       if (x &lt; max_fields) { //max input box allowed
         x++; //text box increment
         
         /* FIRST APPENDED ELEMENT */
         
         $(wrapper).append("&lt;div class='container" + x + "' &gt;&lt;label&gt;Name&lt;/label&gt;&lt;input type='text'                            class= 'name' name='mytext[]'&gt;&lt;a href='#' class='remove_field'&gt;Remove&lt;/a&gt;&lt;br&gt;&lt;label&gt;City&lt;/label&gt;&lt;input type='text'                            class= 'city' name='mytext[]'&gt;&lt;br&gt;&lt;label&gt;Age&lt;/label&gt;&lt;input type='text'                            class= 'age' name='mytext[]'&gt;&lt;/div&gt;");
         
         /* SECOND APPENDED ELEMENT */
         
         $('div.hello').append('&lt;div id="container' + x + '" id = "' + x + '"   &gt;Hello, &lt;span class="name"&gt;&lt;/span&gt; &lt;span&gt; ,from&lt;/span&gt; &lt;span class="city"&gt;&lt;/span&gt; &lt;span&gt; Your age is:&lt;/span&gt;&lt;span class="age"&gt; &lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;/div&gt;');
         
         /* THIRD APPENDED ELEMENT */
         
         $('div.hello').append('&lt;div id="container' + x + '" id = "' + x + '"   &gt;Bye, &lt;span class="name"&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;&lt;/div&gt;');
  
         $('input').on('input', function(e) {
  
           var parcontainer = $(this).parents('div').attr('class');
  
  
           spantoappend = $(this).attr('class');
           var val = $(this).val();
           var sel = "#" + parcontainer + '  .' + spantoappend;
           //  var sel = "#" + divtoappend + " span";
           $(sel).text('');
           $(sel).append(val);
         });
  
       }
     });
  
     $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
       e.preventDefault();
       
       /* THIS REMOVES SECOND APPENDED ELEMENT */ /* HOW DO I MAKE THIS REMOVE THIRD APPENDED ELEMENT TOO? */
       
       var rem = $(this).parents('div').attr('class');
       $('#' + rem).remove();
       
        /* THIS REMOVES FIRST APPENDED ELEMENT */ 
       
       $(this).parent('div').remove();
       x--;
  
     });
  
  
   });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.block {
    display: block;
  }
  
  input {
    width: 50%;
    display: inline-block;
    margin: 4px;
    margin-left: 10px;
  }
  
  span.add,
  span.remove {
    display: inline-block;
    cursor: pointer;
    text-decoration: underline;
  }
  
  label {
    display: inline-block;
    width: 40px;
    text-align: right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="input_fields_wrap"&gt;
    &lt;button class="add_field_button"&gt;Add person&lt;/button&gt;
  
    &lt;br&gt;&lt;br&gt;
    &lt;div class="container"&gt;
      &lt;label&gt;Name&lt;/label&gt;&lt;input type="text" id="name" name="mytext[]"&gt; &lt;br&gt;
      &lt;label&gt;City&lt;/label&gt;&lt;input type="text" id="city" name="mytext[]"&gt; &lt;br&gt;
      &lt;label&gt;Age&lt;/label&gt;&lt;input type="text" id="age" name="mytext[]"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div class="hello"&gt;
  
    Hello, &lt;span class="one"&gt;&lt;/span&gt;, from &lt;span class="two"&gt;&lt;/span&gt;. Your age is: &lt;span class="three"&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;
  
   Bye, &lt;span class="four"&gt;&lt;/span&gt;&lt;br&gt;&lt;br&gt;
  
  &lt;/div&gt;
  
  &lt;div class="bye"&gt;
  
     
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>