Call a jquery (javascript) function from multiple forms on a single page

[filch]

Hi, I am in a real need to get this going quickly and have run into a bit of a stumbling block. Here is what I am trying to do. I am creating a Paypal Add to Cart page for several products. I have this working for a single button form. The main script is:

<script type="text/javascript">
		$(function(){
			// start a counter for new row IDs
			// by setting it to the number
			// of existing rows
			var newRowNum = 2;
			
			// bind a click event to the "Add" link
			$('#addnew').click(function(){
				// increment the counter
				newRowNum += 1;
						
				// get the entire "Add" row --
				// "this" refers to the clicked element
				// and "parent" moves the selection up
				// to the parent node in the DOM
				var addRow = $(this).parent().parent();
				
				// copy the entire row from the DOM
				// with "clone"
				var newRow = addRow.clone();
				
				// set the values of the inputs
				// in the "Add" row to empty strings
				//$('input', addRow).val('');
				//$('name', addRow).val('os' + newRowNum);
				
				// replace the HTML for the "Add" link 
				// with the new row number
				$('td:first-child', newRow).html('<input type="hidden" name="on' + newRowNum + '" value="Email Address ' + (newRowNum - 1) + '">Recipient');
				
				// insert a remove link in the last cell
				$('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>');
				
				// loop through the inputs in the new row
				// and update the ID and name attributes
				/*$('td:first-child.next-child.input', newRow).each(function(i){
					var newID = newRowNum;
					$(this).attr('id','os' + newID).attr('name','os' + newID);
				});*/
				/*$('td:second-child.input', newRow).each(function(i){
					var newID = newRowNum;
					$(this).attr('id','os' + newRowNum).attr('name','os' + newRowNum);
				});*/
				$('input:hidden', newRow).attr('id','on' + newRowNum ).attr('name','on' + newRowNum );
				$('input:text', newRow).attr('id','os' + newRowNum ).attr('name','os' + newRowNum );

				//$('td:first-child.next', newRow).html('<input type="text" id="os' + newRowNum + '" name="os' + newRowNum + '" value="">');
				
				// insert the new row into the table
				// "before" the Add row
				addRow.before(newRow);
				document.tp01.quantity.value = newRowNum-1;
				// add the remove function to the new row
				$('a.remove', newRow).click(function(){
					$(this).parent().parent().remove();
					return false;				
				});
			
				// prevent the default click
				return false;
			});
		});
		</script>

This is called from a text link in the page as follows:

<input type="hidden" name="on2" value="Email Address 1"><a id="addnew" href="">Add</a></td><td><input name="os2" type="text" id="os2" value="" size="24" maxlength="60" />

Each successive click on the Add link adds a new row to the table and allows another email address to be added to the form. The trick now is that I need to add multiple Paypal button forms to the page that re-uses this function and perhaps each form calls this function with something like:

<input type="hidden" name="on2" value="Email Address 1"><a id="addnew2" href="">Add</a></td><td><input name="os2" type="text" id="os2" value="" size="24" maxlength="60" />

and

<input type="hidden" name="on2" value="Email Address 1"><a id="addnew3" href="">Add</a></td><td><input name="os2" type="text" id="os2" value="" size="24" maxlength="60" />

etc.

Can anyone guide me as to how to amend the function to accept calls from different links like this so that the new rows are added or removed from the appropriate form on the page? I have tried the following:

<script type="text/javascript">
	$(function(){
		// start a counter for new row IDs
		// by setting it to the number
		// of existing rows
		var newRowNum = 2;
		var bindLink = function(linkSelector) {

		// bind a click event to the "Add" link
		$(linkSelector).click(function() {
			// increment the counter
			newRowNum += 1;
						
			// get the entire "Add" row --
			// "this" refers to the clicked element
			// and "parent" moves the selection up
			// to the parent node in the DOM
			var addRow = $(this).parent().parent();
				
			// copy the entire row from the DOM
			// with "clone"
			var newRow = addRow.clone();
				
			// set the values of the inputs
			// in the "Add" row to empty strings
			//$('input', addRow).val('');
			//$('name', addRow).val('os' + newRowNum);
				
			// replace the HTML for the "Add" link 
			// with the new row number
			$('td:first-child', newRow).html('<input type="hidden" name="on' + newRowNum + '" value="Email Address ' + (newRowNum - 1) + '">Recipient');
				
			// insert a remove link in the last cell
			$('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>');
				
			// loop through the inputs in the new row
			// and update the ID and name attributes
				
			$('input:hidden', newRow).attr('id','on' + newRowNum ).attr('name','on' + newRowNum );
			$('input:text', newRow).attr('id','os' + newRowNum ).attr('name','os' + newRowNum );
				
			// insert the new row into the table
			// "before" the Add row
			addRow.before(newRow);
			document.tp01.quantity.value = newRowNum-1;
			// add the remove function to the new row
			$('a.remove', newRow).click(function(){
				$(this).parent().parent().remove();
				return false;				
			});
			
			// prevent the default click
			return false;
		});
		};
	});
</script>

called with:

<input type="hidden" name="on2" value="Email Address 1">
          <a id="addnew2" href="" onclick="bindLink('addnew2')">Add</a>

as suggested by someone else but does not work.

Thanks for any help.

Dave