title: Jquery pasting a cloned tr after current div
body: <p>I'm building a system to automatic create strings. I have some problems with copying and pasting some cloned data. When I press my 'Add Product' button, a tr will be pasted under the last tr in that table with the following code: <code>$('.tableProducts tr').last().after(item);</code> This works fine, as you can see in my example down below: <BR></p>
  
  <p><strong>Situation 0(When you visit the url)</strong><Br>
  <a href="https://i.stack.imgur.com/PnNsN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PnNsN.png" alt="enter image description here"></a>
  <strong>Situation 1: Add Product is clicked</strong>
  <a href="https://i.stack.imgur.com/uZZZ0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uZZZ0.png" alt="enter image description here"></a></p>
  
  <p>Now this is my problem: When I click on the Create option button, the table will be cloned so that an other option with products can be created. The add product button in the second option still works, it adds an other tr underneath the second option. BUT when i click the first add product button, it adds an other tr underneath the last option that has been added. It should add a tr in the table that it has been nested in, not the last table! Here are some examples so you get a better feeling about what I mean.</p>
  
  <p><strong>1. Create option has been clicked</strong>
  <a href="https://i.stack.imgur.com/Knrnt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Knrnt.png" alt="enter image description here"></a>
  <strong>2. Add Product has been clicked in the second option</strong>
  <a href="https://i.stack.imgur.com/tQK56.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tQK56.png" alt="enter image description here"></a>
  <strong>3. Add Product has been clicked in the first option ( PROBLEM! )</strong>
  <a href="https://i.stack.imgur.com/9bw4I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9bw4I.png" alt="enter image description here"></a></p>
  
  <p>I hope you'll understand my problem, down below you can find my code.</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() {
    $('.addproduct').click(function(e) {
      // Clone a product and add it to the option.
      e.preventDefault();
      var item = $('.hiddenTemplate tr').eq(1).clone(true);
      $('.tableProducts tr').last().after(item);
  
    });
    $('.addOption').click(function(e) {
      e.preventDefault();
      var optiondiv = $('.optiondiv:first').clone(true);
      var productdiv = $('.productdiv:first').clone(true);
  
      var optiontable = $('.optiondiv table:eq(1)').clone(true);
      var producttable = $('.productdiv table:eq(1)').clone(true);
  
      optiondiv.html(optiontable);
      productdiv.html(producttable);
  
      optiontable.removeAttr('class');
      producttable.removeAttr('class');
  
      optiontable.addClass('tableOptions');
      producttable.addClass('tableProducts');
  
      $('.hr').before(optiondiv);
      $('.hr').before(productdiv);
  
    });
  });</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;
  EDIT 1: HTML ADDED
  
  &lt;div class="container"&gt;
    &lt;div class="optiondiv"&gt;
      &lt;table class="tableOptions"&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;b&gt;Option&lt;/b&gt;:&lt;/td&gt;
            &lt;td&gt;&lt;b&gt;Title&lt;/b&gt;:&lt;/td&gt;
            &lt;td&gt;&lt;b&gt;Position&lt;/b&gt;: &lt;/td&gt;
            &lt;td&gt;&lt;b&gt;Input Type&lt;/b&gt;:&lt;/td&gt;
            &lt;td&gt;&lt;b&gt;&lt;/b&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;
              &lt;button class="addproduct"&gt;Add Product&lt;/button&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input type="text" id="title"&gt;
            &lt;/td&gt;
  
            &lt;td&gt;
              &lt;input type="text" id="position"&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;select id="input"&gt;
                          &lt;option value="1"&gt;Drop-down&lt;/option&gt;
                          &lt;option value="2"&gt;Radio Buttons&lt;/option&gt;
                          &lt;option value="3"&gt;Checkbox&lt;/option&gt;
                          &lt;option value="4"&gt;Multiple Select&lt;/option&gt;
                      &lt;/select&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input type="checkbox" id="required"&gt; Required?
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;table class="hiddenOption"&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;b&gt;Option&lt;/b&gt;:&lt;/td&gt;
            &lt;td&gt;&lt;b&gt;Title&lt;/b&gt;:&lt;/td&gt;
            &lt;td&gt;&lt;b&gt;Position&lt;/b&gt;: &lt;/td&gt;
            &lt;td&gt;&lt;b&gt;Input Type&lt;/b&gt;:&lt;/td&gt;
            &lt;td&gt;&lt;b&gt;&lt;/b&gt;&lt;/td&gt;
            &lt;td&gt;&lt;b&gt;&lt;/b&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;
              &lt;button class="addproduct"&gt;Add Product&lt;/button&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input type="text" id="title"&gt;
            &lt;/td&gt;
  
            &lt;td&gt;
              &lt;input type="text" id="position"&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;select id="input"&gt;
                          &lt;option value="1"&gt;Drop-down&lt;/option&gt;
                          &lt;option value="2"&gt;Radio Buttons&lt;/option&gt;
                          &lt;option value="3"&gt;Checkbox&lt;/option&gt;
                          &lt;option value="4"&gt;Multiple Select&lt;/option&gt;
                      &lt;/select&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input type="checkbox" id="required"&gt; Required?
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
    &lt;div class="productdiv"&gt;
      &lt;table class="tableProducts"&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;b&gt;SKU&lt;/b&gt;:&lt;/td&gt;
            &lt;td&gt;&lt;b&gt;Default Quantity&lt;/b&gt;:&lt;/td&gt;
            &lt;td&gt;&lt;b&gt;Position&lt;/b&gt;:&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;
              &lt;input type="text" id="sku"&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input type="text" id="quantity"&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input type="text" id="position"&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input type="radio" id="isDefault"&gt; Is default?
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input type="checkbox" id="userdefined"&gt; User required?
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;table class="hiddenTemplate"&gt;
        &lt;tbody&gt;
          &lt;tr&gt;
            &lt;td&gt;&lt;b&gt;SKU&lt;/b&gt;:&lt;/td&gt;
            &lt;td&gt;&lt;b&gt;Default Quantity&lt;/b&gt;:&lt;/td&gt;
            &lt;td&gt;&lt;b&gt;Position&lt;/b&gt;:&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
            &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td&gt;
              &lt;input type="text" id="sku"&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input type="text" id="quantity"&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input type="text" id="position"&gt;
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input type="radio" id="isDefault"&gt; Is default?
            &lt;/td&gt;
            &lt;td&gt;
              &lt;input type="checkbox" id="userdefined"&gt; User required?
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
    &lt;hr class="hr"&gt;
    &lt;button class="addOption"&gt;Create option&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If you need some more explanation or code(html), feel free to ask me!
  Happy coding</p>