alphabetize dynamically created lists

[teedoff]

Hi I have an application that dynamically adds unordered lists forms as needed, then once the user(backroom) enters values in the form fields, the lists are saved to an action page and displayed. The lists are written to a page called vendorProductList.cfm and written as an unordered lists. Then that page pulls the html out and inserts the newly created list(s) into my page. Here is the code that does that written with cf:

<cfsavecontent variable = "vendorProductList">
<cfoutput>
  <cfset results = deserializeJSON(url.data)>
  <cfloop collection = '#results#' item = 'itemName' >
    <cfset item = results[itemName]>
    <cfloop collection = '#item.vendors#' item = 'vendorName'>
      <ul>
        <li style="list-style-type:none;">
          <h2>#vendorName#</h2>
        </li>
        <cfset productArray = item.vendors[vendorName]>
        <cfloop array='#productArray#' index = 'productName'>
          <li style="margin-left:30px;">#productName#</li>
        </cfloop>
      </ul>
    </cfloop>
  </cfloop>
</cfoutput>
</cfsavecontent>
<cffile     action            =     "write"
				nameconflict      =     "overwrite"
				file              =     "#expandPath('vendorProductList.cfm')#"
				output            =     "#vendorProductList#">

I think, depending on the order of how new lists are added, the lists that are generated gets displayed. However, I need them to be alphabetized instead of the user having to do this.

Here is the code Im working with. Its a combination of coldfusion, ajax, and jQuery.

<form>
   <div id="items">
     <fieldset class="product-grouping">
	<legend>Item 1</legend>						
	   <div class="vendor" style="padding-left: 30px;">
	   <span>Vendor: </span>
	   <input type="text" class="vendor-input" name="vendor" />
            <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" name="product" />
		 <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>
	
	<script type="text/javascript">		
		$(document).ready(function() {
				
			$('#vendorProductList').hide();
			
		});
		
	</script>
	
	<div id="vendorProductList"></div>

This code was given to me mostly, and I've tweaked it to some degree. I'm new to jQuery, so dont know alot, but I did find an article on how to sort lists using a bit of code. I'm just not sure how to use it. Any help would be greatly appreciated.

[teedoff]

ok I figured out how to sort by first letter. I just cant figure out how to sort two places. Ex:

ASK
AAmer
Ardvaark

Should be:

AAmer
Ardvaark
ASK

Here is the function I'm using to sort:

$(function(){
   var items = new Array();
   $('li').each(function(){
      items.push($(this).text());
   });
   var items = items.sort();
   for(x=0; x < items.length; x++){
      $('li:eq('+x+')').text(items[x]);
   }
});

But again, it doesnt sort to two places. Thanks for any help in advance!

edit: actually it seems it doesnt work correctly. Not sure why it seems to work one time, then not work the next