Leaderboard

Events like these are applied to elements on loading of the page, if you place them in a function you apply the exactly the same event with same outcome again everytime the function is called, very inefficient, generally if these are placed in function you are doing it wrong. You don't even require the function, you just need to target the parent and then the newly created class references. function addFlowLine() { var table = document.getElementById("query_content_unexe"); var row = table.insertRow(0); row.insertCell(0).innerHTML = '<button class="up">up</button>'; row.insertCell(1).innerHTML = '<button class="down">down</button>'; row.insertCell(2).innerHTML = 'add'; } $("#unexe_table").on("click", ".up, .down", function() { var row = $(this).parents("tr:first"); if ($(this).is(".up")) { row.insertBefore(row.prev()); } else { row.insertAfter(row.next()); } });

Hi Joymis, as Ingolme said the event is being added every time the new row is added. Here is the fix - https://jsfiddle.net/rockey91/8zzq635c/

Every time you create a new row you're adding another event handler to all the rows. The newest row will have just one event handler, but the older rows will have as many event handlers as times you've clicked the "new" button.