jQuery Clone Validation

[Tomby101]

Hello

I'm having problems validating cloned elements. Apologies for the amount of coding posted but I thought I may as well put it in from the start.

This is a sample of the original div:

<div id="addDriver1" class="clonedInput">
	      <table width="100%" border="0" cellspacing="0" cellpadding="0" class="<?= $editDriver; ?>">
         

          <tr>
            <td height="25" align="left" valign="top"><label for="driverReq" >Do you want to make this change or are 
you looking for a quote only?</label></td>
            <td height="25" align="left" valign="top" colspan="2"><select name="driverReq" id="driverReq">
              <option selected="selected" value="">Please select</option>
              <option value="Make Change" <? if ($_SESSION['driverReq']=="Make Change") { echo "selected";} ?> >Make Change</option>
              <option value="Quote only" <? if ($_SESSION['driverReq']=="Quote only") { echo "selected";} ?>>Quote only</option>
            </select></td>
          </tr>
          <tr>
            <td height="5" colspan="3" ></td>
            </tr>
          <tr>
            <td height="25" align="left" valign="top"><label for="driverDate" ;?>>What date would you like this change 
to be effective from? </label></td>
            <td height="25" align="left" valign="top"><input name="driverDate"  type="text" id="driverDate"  style="width: 75px;" value="<?=$_SESSION['driverDate']; ?>" /></td>
            <td height="25" align="left" valign="top">(DD/MM/YYYY) </td>
          </tr>
                    <tr>
            <td height="5" colspan="3" ></td>
            </tr>
</table></div>

This is the cloning script:

$('#btnAddDriver').live('click',function() {
				var num		= $('.clonedInput').length;	// how many "duplicatable" input fields we currently have
				var newNum	= new Number(num + 1);		// the numeric ID of the new input field being added

				// create the new element via clone(), and manipulate it's ID using newNum value
				var newElem = $('#addDriver1').clone(true).attr('id', 'addDriver' + newNum);

		
			
				newElem.prepend("<div class='subhead1'>Add a driver "+newNum+"</div>");
				//newElem.find()
			
				// insert the new element after the last "duplicatable" input field
				$('#addDriver' + num).after(newElem);
				//add the new ID to the inputs
				newElem.find("*[id]").each(function() { 
					$(this).attr("id", $(this).attr("id") + newNum); 
					$(this).attr("name", $(this).attr("name") + newNum); 
					$(this).attr("value", $(this).attr("<?= $_SESSION['"+$(this).attr("name") + newNum+"']; ?>") ); 
				}); 

				newElem.find("label").each(function() {  
				$(this).attr("for", $(this).attr("for")+ newNum); 
				});

This outputs the cloned elements with new id and name e.g. <div id="addDriver2">, "><label for="driverReq2" >,<select name="driverReq2" id="driverReq2"> etc. I've (hopefully) attached a screendump of some of the Firebug stuff.

This is the kind of validation I'm trying:

validateDriverReq2 = function(){		
			if(driverReq2.val()==""){
				$(this).addClass("error");
				driverReq2Info.html("Please confirm what you would like us to do with your request.<br>");
				$("#driverReq2Info").addClass("errorTop");
				//labelAddPC.addClass("labelError");
				$("label[for='driverReq2']").addClass("labelError");
				checkErrors();
				topErrorDriver();
				return false;
			}
			else{
				driverReq2.removeClass("error");
				driverReq2Info.html("");
				driverReq2Info.removeClass("errorTop");
				$("label[for='driverReq2']").removeClass("labelError");
				checkErrors();
				topErrorDriver();
				return true;
			}
		}

	 	driverReq2.blur(validateDriverReq2);
		driverReq2.change(validateDriverReq2);	
		
		validateDriverReq = function(){		

			if(driverReq.val()==""){
				$(this).addClass("error");
				driverReqInfo.html("Please confirm what you would like us to do with your request.<br>");
				$("#driverReqInfo").addClass("errorTop");
				//labelAddPC.addClass("labelError");
				$("label[for='driverReq']").addClass("labelError");
				checkErrors();
				topErrorDriver();
				return false;
			}
			else{
				driverReq.removeClass("error");
				driverReqInfo.html("");
				driverReqInfo.removeClass("errorTop");
				$("label[for='driverReq']").removeClass("labelError");
				checkErrors();
				topErrorDriver();
				return true;
			}
		}

	// }

	 driverReq.blur(validateDriverReq);
	driverReq.change(validateDriverReq);

I use this code in other areas of the form and it works fine. However, this validation gets totally messed up in the cloned section. Moving through the cloned driverReq2 results in label for original driverReq activating and showing an error, although it does pick up an error correctly for the driverReq2 field itself. Then, on selecting an option from driverReq2, the error doesn't remove itself on change or blur.

I've tried, unsuccessfully, to bind the variables so that they point to the form name itself and it's parent div (e.g. #addDriver2).

I'm hoping someone here can help and advise what I'm doing wrong before I go completely gaga :)

Thanks