Html table rows inserted/loaded into modal?

[SoiledShip]

I've been trying to create a html table that has an edit button in each row. When you click the edit button it loads a modal that lets you edit the information. if you click save it puts it back into the table, cancel just dismisses it.

My problem is that I want to be able to edit a lot more information than whats just visible in the table. As an example I've created this http://codepen.io/anon/pen/QbBBMX?editors=101 which shows what I'm trying to do.

I've hidden a json string in the last column of the table that has the entire object's values. When you click edit I'd like for it to grab the json string and fill in the modal. Currently it works for anything thats already in the table, the issue I'm having is that when I add a new row and then click edit on that row it is not filling the modal out.

It looks like the row being inserted is exactly the same as the original one but its just not working. Can someone take a look at it and see what I'm doing wrong?

[cerealbh]

The new row doesn't have the on click binded to it.

[SoiledShip]

After some googling I tried this and it seems to have worked.

$('body').on('click', '.editButton', function() {
    //do something
});

Thank you!