Hi Here is my problem https://jsfiddle.net/mphur5eq/14/ I have two tables on the left section1 on top and section2 at the bottom each section has its own button to insert row section 1 has different number of fields than that on section 2. the problem is when i clicked on New Row on section 2 it clones the row from section 1 which is wrong, it should clone the row of the section where it belongs. can you help me with this? Thank you
Hi. Try avoid using ID in cloning, as two same ID within same page isn't valid. About cloning itself, I think you'd better use following pattern: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>table cloning</title> <style> input[type="text"]{ width: 6em; } </style> </head> <body> <div class="frms"> <table> <caption>Table 1</caption> <tr><!-- 1st row --> <td><input value="0" type="text"></td> <td><input value="0" type="text"></td> <td><input value="0" type="text"></td> </tr><tr><!-- 2nd row --> <td><input class="newrow" value="New Row" type="button"></td> </tr> </table> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script> $('.newrow').on('click', function(){ //get 1st row var $row1 = $(this).parents('tr').prev(); //create clone to 1st row var $cloneRow1 = $row1.clone(); //insert newly created clone to place after row1 $row1.after($cloneRow1); }); </script> </body> </html> HTML: