Adding classes to appended content

Hey all, I'm just going to jump right in and describe the issue. JS fiddles are provided to help give you an understanding. Any help is greatly appreciated. Thanks!

SEE LINK IN THE COMMENTS FOR WORKING FILE

1. The Functions

Function 1: Adding Multiple Registrations

The user can add additional registrations form, to complete more then 1 registration simultaniously. JS FIDDLE HERE

Function 2: Defining the type of Program

The user can select from multiple types of program registrations available. Upon Selecting a Program it fetches the appropriate form from an external file. JS FIDDLE HERE

2. The Problem

When the program type is assigned to a registration form it returns the data in a div with a specific class. This is obviously a problem because it will return that data to A开发者_开发技巧LL the divs with that class. If you add multiple registrations then there will be multiple divs with this class.

This div is grabbed in the first function when the registration form is initially added.

3. Solution Needed

I need to dynamically add numbers into the class of this div, each time a new program is added. This will make each div unique and eliminate the problem.

<div class="reg"></div> 
<div class="reg"></div> 
<div class="reg"></div> 
<div class="reg"></div>

Ideally it should be something like this:

<div class="reg1"></div>
<div class="reg2"></div>
<div class="reg3"></div>
<div class="reg4"></div>

I don't have the slightest clue how to get started with this, but it would have to be part of the original function.

If the problem is that clicking one registration's checkbox changes all the registrations, you just need to scope your selectors better. For example, imagine that each registration looks something like this:

<div class='registration'>
   ... a bunch of stuff
   <input type='checkbox' class='blah' /> 
</div>

Now you have a handler like this to capture clicks on those checkboxes:

$('.registration input[type=checkbox]').live('change', function(){ 

   // figure out which checkbox was checked and whatever
   // but only affect the registration that holds the checkbox:
   var AffectedRegistration = $(this).closest('.registration');

   // do something smart with the affected registration...
});

Note: if you post your actual code here you might get more tailored help, but I think this will get you going.