Hi not sure if this is the right forum, as I'm not altogether sure what kind of code it is. I think its jQuery with some ajax components. lol

Anyway, this code was given to me by someone else and as is works great! It simple allows a user to "add" elements as needed to populate the form.
here is the code then I will explain my issue:

Code:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	
<title>Dynamic Lists Demo</title>
 
<script src="http://www.google.com/jsapi"></script>
<script> 
// Load jQuery
google.load("jquery", "1.4.2");
 
google.setOnLoadCallback(function(){
	$(document).ready(function(){
		$('.add-product').live('click', function(){
			var productContainer = $(this).parents('.product');
			var newProduct = $(productContainer).clone();
			$(newProduct).find('.product-input').val('');
			
			var vendorProductContainer = $(productContainer).parents('.vendor-products');
			$(vendorProductContainer).append(newProduct);
			$(productContainer).find('.add-product').hide();
						
			return false;
		});
		$('.add-vendor').live('click', function(){
			var vendorContainer = $(this).parents('.vendor');						
			//clone the vendor
			var newVendor = $(vendorContainer).clone();
			$(newVendor).find(':input').val('');
			
			//remove all but the first products
			$(newVendor).find('.product:gt(0)').remove();
			
			$(vendorContainer).after(newVendor);
			$(newVendor).find('.add-product').show();
			$(vendorContainer).find('.add-vendor').hide();
			return false;
		});
		
		$('#submit').click(function(){
			$('#results').html('Loading...');
			
			var items = {};
			
			$('.product-grouping').each(function(i,e){
				var title = $(e).find('legend').html();
				items[title] = {};
				items[title]['category'] = $(e).find('.category').val();
				items[title]['vendors'] = {};
				$(e).find('.vendor').each(function(vi,ve){
					var products = [];
					var v = $(ve).find('.vendor-input').val() || 'vendor ' + (vi+1);
					
					$(ve).find('.product-input').each(function(pi,pe){
						products.push($(pe).val());
					});
					items[title]['vendors'][v] = products;
				});
				
			});
			
			$.ajax({
				type: 'GET',
				url: 'pageBuilder/builderAction.cfm?data=' + JSON.stringify(items),
				dataType: 'html',
				complete: function(data){
					$('#results').html(data.responseText);
				}
			});
							
		});
		
		$('#add-item').click(function(){
			var item = $('.product-grouping:last').clone();
			$(item).find('.vendor:gt(0)').remove();
			$(item).find('.product:gt(0)').remove();
			$(item).find(':input').val('');
			$(item).find('.add-product').show();
			$(item).find('.add-vendor').show();
			var itemIdx = $('.product-grouping').size() + 1;
			$(item).find('legend').html('Item ' + itemIdx);
			$('#items').append(item);
		});
		
	});
});
</script>
<style> 
div{
	padding: 10px;
}
</style>
</head>
 
 
 
 
 
 
 
 
 
<body>
	
	<form method="POST">
		<div id="items">
			<fieldset class="product-grouping">
				<legend>Item 1</legend>
				<!--- <div class="category-grouping">
					<span>Category: </span>
					<select class="category">
						
							
								<option value="Books">Books</option>
							
								<option value="Electronics">Electronics</option>
							
								<option value="Music">Music</option>
							
								<option value="Art">Art</option>
							
								<option value="Clothing">Clothing</option>
							
						
					</select>
				</div> --->
				<div class="vendor" style="padding-left: 30px;">
					<span>Vendor: </span>
					<input type="text" class="vendor-input" />
					<a href="#" class="add-vendor">add vendor</a>
					
					<div class="vendor-products" style="padding-left: 60px;">
						<div class="product">
							<span>Product: </span>
							<input type="text" class="product-input" />
							<a href="#" class="add-product">add product</a>
						</div>
					</div>
				</div>
				
			</fieldset>
		</div>
		
		<input type="button" id="add-item" value="add item" />
		<input type="button" id="submit" value="submit" />
	</form>
	<h1>Results:</h1>
	<div id="results"></div>
</body>
 
</html>
here is the action:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<cfsetting showdebugoutput="false" />
<cfdump var="#deserializeJSON(url.data)#" />
</body>
</html>
As it is now, the results of the input fields just display on the page as a struct. What I want is for the values of the vendor and product input fields to display in another page already done, in an unordered list.

The vendor input values would be in a heading tag, then the product values would complete the list. A new item could then start a totally new list with vendor again being in a heading tag within the list, then the products finishing the rest of the list again. Here is an example of the list Im talking about:

Code:
<ul>
<li><h2>vendor-input variable here</h2></li>
<li>product-input variable here</li>
<li>product-input variable here</li>
<li>product-input variable here</li>



</ul>
<ul>
<li><h2>Second vendor-input variable here</h2></li>
<li>Second product-input variable here</li>
<li>Second product-input variable here</li>
<li>Second product-input variable here</li>



</ul>
The problem is I dont know how to pass jQuery variables to another page and then display them in html tags lol. I have never worked with client side scripting before. Whatever the variables of vendor input form and the product input form needs to be in the lists. I hope this makes sense. Sorry for being such a newb! lol Thanks for any help!