[midasxl]

Hello and thanks for your time. I have a point of contact form that can be cloned if the end user decides to add an additional point of contact. In fact, the project calls for the addition of 9 points of contact if the end user desires. This results in anywhere from 2-9 forms which are identical except for the div that wraps them. Each form is wrapped in a div that recieves an id set to poc1, poc2, poc3, etc. Other than that the input fields within the form all share the same class and name. For simplicity I'm only going to reference the first three input fields of the form.

HTML:

<div class="pocSection">
<div id="poc1" class="poc">
<div class="subheader"><h4 class="secTitle">Primary POC</h4></div>
<div class="innerField">
<span class="lname error"><input type="text" size="15" maxlength="15" name="Last_Name" class="Last_Name" /></span>
<span class="fname error"><input type="text" size="15" maxlength="15" name="First_Name" class="First_Name" /></span>
<span class="mi error"><input type="text" size="15" maxlength="15" name="Middle Initial" class="Middle_Initial" /></span>
</div>
<input type="button" class="addPoc" value="Add Another POC" />
</div>
</div>

jQuery:

$('.addPoc').live('click', function(event){
var pocNum = $('.pocSection > div').length;
if (pocNum > 9){
alert("You have reached the maximum of 9 additional POC's");
}else{
var newPoc = $("#poc1").clone().attr('id', 'poc' + (pocNum + 1));
newPoc.find('.addDeleteAnotherPoc').append('<input type="button" class="deletePoc" value="Delete POC" />');
newPoc.find('.subheader').html('<h3>Additional POC</h3>');
newPoc.find('input[type="text"]'.val("");
newPoc.appendTo('.pocSection');
}
return false;
});

As you can see, when the end user clicks the button with the class of 'addPoc', the div with an id of 'poc1' is cloned, and added to the bottom of the 'pocSection' div. Next I have a 'keyup' function that changes the style of the span tag that wraps the inputs of the form. The default class of error is simple padding on the span tag. The class of check adds a background color to that padding, giving the appearance of a colored box wrapping the input field.

$('.Last_Name').keyup(function(){
var lnameLen = $(this).val().length;
if(lnameLen > 2){
if($('.lname').hasClass('error')){
$('.lname').removeClass('error').addClass('check');
}
}
}); 

Ok, so here's the issue. When I clone the form, there are two input tags with class="Last_Name", so when I type in the first one, it also targets the second one. When the code satisfies the condition of var lnameLen being greater than 2, both input fields change their class. How do I differentiate between the two? I am assuming something like the following:

$('#poc1 .Last_Name').keyup(function(){...
$('#poc2 .Last_Name').keyup(function(){...

Not sure though. Any assistance will be greatly appreciated.

Thanks!

[Martyr2]

You are on the right track with your thinking. When you clone your element, you can find its version of the Last_name element, bind an event to it and then add it to ".pocSection".

That or you can select all elements with the class ".Last_Name" and using an "each" loop through each one and fetch its ID then use that to then bind a keyup() function to it.

Just thinking off the top of my head something along the lines of....

$(".Last_Name").each(function () {
    // Fetch the ID of the element
    var curElementID = $(this).attr("id"); 

    // Use the element ID to then target it with keyup
    $(curElementID).keyup(function() { 
        // Do your keyup
    });
});

So play around with this and you should get something that works. The idea here is to isolate each element and attach its own keyup event for it. You shouldn't have to repeat the code and the solution will probably be very similar to what I have shown above.

Enjoy!