Cannot copy elements properly

Question

I have copied the element but when I click on the 'edit' button after that in the new cell I cannot edit it. Please tell me my mistake.
Link: https://code.sololearn.com/WegpMUHfkYV7/#html

Answer 1

Jquery listeners wont work when tied directly to dynamic content.
To get around this you tie it to a static element and within that element only look at click on your selector
$('staticElem').on('click', '#yourSelector', function() { //do something });

Answer 2

Could explain the code rather? I can't understand the staticElem and yourSelector part

Answer 3

$("table").on("click","#edit",function(){}

Answer 4

A static element is one that's always part of the document, it is never created or destroyed by jquery. yourSelector is just whatever element you are trying to detect clicks on

Answer 5

Thank you for the tip. I tried it out but when I clicked on the edit button of the new row the text of the first row was changing. Is there a way to fix that?

Answer 6

Yes, that issue is because you are always targeting the same element by id, you need to change your target based on which edit button is clicked

Answer 7

Give each element you create unique ids. The you can get the event.target from jquery.
$("table").on("click","#edit",
function(event){
var elem = event.target.id
}
And based on which button is clicked use that to target the text you want to change

Answer 8

So could you please give the code for the edit button.

Answer 9

I did some research and I found out that id name cannot be repeated more than once so I changed it to all the IDs to class but when I click on the edit button both the rows content changes. Is there a way to fix it?Is there a way to change the cell content based on which cell button was pressed?

Answer 10

when you create a new row, you should add an itterator variable to the id's so instead of #edit and #celltext you would have #edit1 then #edit2… and so based on which edit id is returned you just have to slice off the number at the end and use it to target the corresponding #celltext + itterator

Answer 11

Var itterator = 1
append("<tr class='row'><td class='column'><p id='celltext"+itterator+"'>New</p><button id='edit"+itterator+"'>edit</button><button id='addrw'>add row</button><button id='addclmn'>add column</button></td></tr>");
Itterator++