title: JQuery - Help on .remove() function
body: <p>I have a problem with my code, I just add some remove() function, and I see only one problem with this with the site section and the PRM section.</p>
  
  <p>Here is a video capture of the "problem" : <a href="http://recordit.co/HGak32nwpy" rel="nofollow noreferrer">http://recordit.co/HGak32nwpy</a>
  <br>When I append items, I don't really want to erase the last one appended but the last of my section. For exemple if I append 2 sites on the first company and 3 other one on the second company. If I press the remove() button on the first company, I want only to append the last site FROM the first company and not the last one created. Same thing for the PRM section.</p>
  
  <p>Thanks in advance for your help !</p>
  
  <p><a href="https://jsfiddle.net/Uxrieg/jnwrc5ay/300/" rel="nofollow noreferrer">Here is a JSFiddle for the code</a></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>$(document).ready(function() {
    var counter = 2;
    $('#btnAdd').on('click', function() {
      $('#company').append('&lt;li&gt;&lt;hr&gt; Company N°' + counter + ' &lt;input id="siteAdd" type="button" value="Add Site" /&gt;&lt;input id="siteRemove" type="button" value="X"/&gt;&lt;/li&gt;');
      counter++;
    });
    $("#btnRemove").on('click', function() {
      if (counter == 2) {
        alert("You need to have at least one company !");
        return false;
      }
      $('li:last').remove();
      counter--;
    });
  });
  
  $(document).ready(function() {
    var counter = 1;
    $('#company').on('click', '#siteAdd', function() {
      $(this).closest('li').append('&lt;p&gt;Site N°' + counter + ' &lt;input id="prmAdd" type="button" value="Add PRM" /&gt;&lt;input id="prmRemove" type="button" value="X" /&gt;&lt;/p&gt;');
      counter++;
    });
    $('#company').on('click', '#siteRemove', function() {
      if (counter == 1) {
        alert("You need to have at least one site !");
        return false;
      }
      $('p:last').remove();
      counter--;
    });
  });
  
  $(document).ready(function() {
    var counter = 1;
    $(document).on('click', '#prmAdd', function() {
      $(this).closest('li p').append('&lt;span style="margin-left: 10px;"&gt;PRM N°' + counter + '&lt;/span&gt;');
      counter++;
    });
    $(document).on('click', '#prmRemove', function() {
      if (counter == 1) {
        alert("You need to have at least one PRM !");
        return false;
      }
      $('span:last').remove();
      counter--;
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="company"&gt;
    &lt;li&gt; Company N°1
  &lt;input id="siteAdd" type="button" value="Add Site" /&gt;
  &lt;input id="siteRemove" type="button" value="X" /&gt;
    &lt;/li&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;input id="btnAdd" type="button" value="+ Company" /&gt;
  &lt;input id="btnRemove" type="button" value="- Company" /&gt;
  &lt;script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>