javascript - jQuery: Delete rows from multiple tables simultaneously -

i use dynamically generated rows form preview, , i'm trying remove rows in 2 different tables simultaneously. if delete second line (#2) on "addfieldstoformdiv" want second line (#2) on "addfieldstopreviewdiv" removed simultaneously. have workable solution ?

here's js fiddle

i tried use:

$("#addfieldstoformdiv, #addfieldstopreviewdiv")     .on("click", "#deleterowbutton", function (event)      {         $(this).closest("tr").remove();         counter--;     }); 

but without result wanted.

well main reason working addfieldstoformdiv table because doing work on addfieldstoformdiv. function have here binding click element both tables #deleterowbutton elements. problem here addfieldstoformdiv table of these #deleterowbutton elements, binding click other table pointless. once have cleaned up, still have perform remove on both tables. modified function work.

$("#addfieldstoformdiv").on("click", "#deleterowbutton",function (event) {     var rowidx = $(this).closest("tr").index();     removerowfromtable($("#addfieldstopreviewdiv"), rowidx);     removerowfromtable($("#addfieldstoformdiv"), rowidx);      counter--; });    function removerowfromtable( table,  rowidx){     table.find("tr").eq(rowidx).remove(); }