title: Dynamically adding and removing div using JQuery?
body: <p>I'm trying to create a form that allows a user to enter their experience and education</p>
  
  <p>I would like the user to be able to add and remove education or experience.</p>
  
  <p>I am able to do this... sort of.  Only the problem is my new divs that I am creating are being appended to the end of the page instead of being appended after the previous div.</p>
  
  <p>These are my scripts:</p>
  
  <pre><code>    $(document).ready(function() {
          var inputs = 1;
  
          $('#btnAdd').click(function() {
              $('.btnDel:disabled').removeAttr('disabled');
              var c = $('.clonedInput:first').clone(true);
              c.children(':text').attr('name', 'input' + (++inputs));
              $('.clonedInput:last').after(c);
          });
  
          $('.btnDel').click(function() {
              if (confirm('continue delete?')) {
                  --inputs;
                  $(this).closest('.clonedInput').remove();
                  $('.btnDel').attr('disabled', ($('.clonedInput').length &lt; 2));
              }
          });
      });
      $(document).ready(function() {
  
          var inputs = 1;
  
          $('#btnAdd2').click(function() {
              $('.btnDel2:disabled').removeAttr('disabled');
              var c = $('.clonedInput:first').clone(true);
              c.children(':text').attr('name', 'input' + (++inputs));
              $('.clonedInput:last').after(c);
          });
  
          $('.btnDel2').click(function() {
                  --inputs;
                  $(this).closest('.clonedInput').remove();
                  $('.btnDel2').attr('disabled', ($('.clonedInput').length &lt; 2));
          });
      });
  </code></pre>
  
  <p>I understand it's bad form to duplicate code like this but I'm not sure how else to else to do it so that clicking the add button doesn't get pressed for the wrong div...</p>
  
  <p>and my html is:</p>
  
  <pre><code>&lt;form id="myForm"&gt;
          &lt;h2&gt;Education&lt;/h2&gt;
          &lt;p&gt;Please add all of your education&lt;/p&gt;
          &lt;div style="margin-bottom: 4px; border: 2px solid; border-style: dashed" class="clonedInput"&gt;
  
              Level: &lt;select&gt;
                  &lt;option value="secondary"&gt;Secondary&lt;/option&gt;
                  &lt;option value="someps"&gt;Some Post Secondary&lt;/option&gt;
                  &lt;option value="college"&gt;College&lt;/option&gt;
              &lt;/select&gt; &lt;br /&gt; &lt;br /&gt;
      Did you receive a degree, diploma or certificate?&lt;br /&gt;
          &lt;select&gt;
              &lt;option value="certificate"&gt;Certificate&lt;/option&gt;
              &lt;option&gt;Diploma&lt;/option&gt;
              &lt;option value="degree"&gt;Degree&lt;/option&gt;
          &lt;/select&gt; &lt;br /&gt;
          &lt;input type="button" class="btnDel" value="Remove Education" disabled="disabled" /&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;input type="button" id="btnAdd2" value="add Education" /&gt;
      &lt;/div&gt;
  
      &lt;h2&gt;Experience&lt;/h2&gt;
      &lt;p&gt;Please add all of your experience&lt;/p&gt;
      &lt;div style="margin-bottom: 4px; class="clonedInput"&gt;
  
          Position title: &lt;input type="text"&gt;&lt;br /&gt; Years at position:
          &lt;input type="number"&gt;&lt;br /&gt;
          Responsibilities: &lt;input type="text"&gt;&lt;br /&gt; 
          &lt;input type="text"&gt;&lt;br /&gt; 
          Type: &lt;select&gt;
              &lt;option&gt;Accounting, banking and Finance&lt;/option&gt;
              &lt;option&gt;Publishing &amp; Journalism&lt;/option&gt;
              &lt;option&gt;Social Care &amp; guidance work&lt;/option&gt;
          &lt;/select&gt;
          &lt;input type="button" class="btnDel2" value="Remove Experience"
              disabled="disabled" /&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
          &lt;input type="button" id="btnAdd2" value="add Experience" /&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Any ideas on how I can fix my script so that when I click the add button for education, a new div containing all of the fields for "education" show up below the previous education box and the same for education?</p>
  
  <p>Any help would be appreciated.  Thanks!</p>