Basically, I have a workflow-type interface, wherein a user can add in several boxes of content which are chained together to create a workflow. The individual boxes are laid out in HTML, along these lines:

<div id = '#workflow-box-template'>

      Arg 1 : <input type = 'text'><br/>

      Arg 2 : <input type = 'text'><br/>

      Arg 3 : <input type = 'text'><br/>

      <button>close button</button>

      <button>cancel button</button>

      <button>run button</button>

      ...

</div>

There's an add button that clones that div template, strips out the ID and pops it into place. My concern is - what's the best way to access those subelements of my newly created div?

For example, I'll need to attach some handlers to the close, cancel, and run buttons. What's the best way to find them? They're dynamically created and there's more than one of them, so I can't easily refer to them by ID (without resorting to a convoluted naming scheme to ensure uniqueness). Ditto for the elements in the form.

I'm concerned with just using selectors to pull 'em out in order because that makes for very brittle code. If I change the order of the elements, I need to be sure to update my associated handling code.

If all of this stuff was static and I only had single close, cancel, and run buttons, I'd just give them IDs and refer to them that way. But since there's more than one, I'm stuck.

What's the preferred way to find these things? Fake custom class on the element? Extra fake attributes? Code dependent upon the order of the elements?