Not sure how to find correct div every time a form is dynamically generated

I have a form that has parts that are dynamically generated based on user selection and can be done so infinite times. My setup looks like: Visualizations has_many Rows, Rows has_many Panes. When you select add row to visualization a new one will pop up, and from there you can add Panes (up to 3).

Cocoon has this awesome callback called after-insert that allows you to manipulate the html after a row has been inserted. I'm trying to implement a foundation dropdown window in each row. To do that I need to instantiate foundation in each dynamically generated Row. On top of that, Foundation dropdown's rely on ID's to work.

$('#rows').on('cocoon:after-insert', function(e, insertedItem) {
// ... do something
});
...where e is the event and the second parameter is the inserted or
removed item. This allows you to change markup, or add
effects/animations.

So it looks like cocoon is passing the insertedItem as the second parameter to the event callback! (which sounds like the reference you are looking for)

Email codedump link for Not sure how to find correct div every time a form is dynamically generated