Jquery pasting a cloned tr after current div

Question

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: $('.tableProducts tr').last().after(item); This works fine, as you can see in my example down below:

Situation 0(When you visit the url)
Situation 1: Add Product is clicked

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.

1. Create option has been clicked 2. Add Product has been clicked in the second option 3. Add Product has been clicked in the first option ( PROBLEM! )

I hope you'll understand my problem, down below you can find my 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);

  });
});


EDIT 1: HTML ADDED


  
    
      
        
          Option:
          Title:
          Position: 
          Input Type:
          
        
        
          
            
          
          
            
          

          
            
          
          
            
          
          
             Required?
          
        
      
    
    
      
        
          Option:
          Title:
          Position: 
          Input Type:
          
          
        
        
          
            
          
          
            
          

          
            
          
          
            
          
          
             Required?
          
        
      
    
  
  
    
      
        
          SKU:
          Default Quantity:
          Position:
          
          
        
        
          
            
          
          
            
          
          
            
          
          
             Is default?
          
          
             User required?
          
        
      
    
    
      
        
          SKU:
          Default Quantity:
          Position:
          
          
        
        
          
            
          
          
            
          
          
            
          
          
             Is default?
          
          
             User required?

If you need some more explanation or code(html), feel free to ask me! Happy coding

Vara Prasad · Accepted Answer

You can try this code as per your table structure

$('.addproduct').click(function(e) {
    // Clone a product and add it to the option.
    e.preventDefault();
    var item = $('.hiddenTemplate tr').eq(1).clone(true);
    $(this).parents(".optiondiv").next().find(".tableProducts tr").last().after(item);

  });

Jquery pasting a cloned tr after current div

Answers (2)

Related Questions