1.     // when you click submit num tabs
       // you get form fields for tabs
       $('#num_tabs_submit').click(function(){
           
           var num_tabs = parseInt($('#num_tabs').val());
           
           for(var i = 0; i < num_tabs; i++) {
               $.ajax ({
                   type: 'post',
                   url : 'http://dev.touchstorm.com/ten_hpn_admin/index.php/manage_user/get_channels',
                   
                   success: function(results) {
                       $('#tab_content').append('<div id="tab' + i + '"><label>Tab Name<span>*</span><br />' +
                           '<input type="text" class="text tab_text" name="tab' + i + '" /> </label><br/>Choose Channel: ' +
                               '<select id="main_categories' + i + '" class="categories">' +
                               results +
                           '</select>' +
                           '</div>');
                   
                   } // end success
               }); // end ajax    
           
           } // end for
           
           return false;
       }); // end tabs create
          
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

Basically what is happening is that when I go through the for loop I am calling the ajax function to get some categories and add them in. I realize that this is probably not the most efficient way to do this as I am calling the ajax function potentially multiple times depending upon the user when I only need to call it once.  Then when it inputs the ajax created HTML it gives all of the ids the same name when I thought I accounted for it in my code when I added i to all of the id names to differentiate them. The new code below actually breaks the entire thing and it goes off to another page which I do not want it to do.

1. // when you click submit num tabs
       // you get form fields for tabs
       $('#num_tabs_submit').click(function(){
           
           var num_tabs = parseInt($('#num_tabs').val());
           var cateogries = '';
           $.ajax ({
                   type: 'post',
                   url : 'http://dev.touchstorm.com/ten_hpn_admin/index.php/manage_user/get_channels',
                   
                   success: function(results) {
                       alert(results);
                       categories = results;
                   
                   } // end success
               }); // end ajax
           
           
           for(var i = 0; i < num_tabs; i++) {
           
               $('#tab_content').append('<div id="tab' + i + '"><label>Tab Name<span>*</span><br />' +
                           '<input type="text" class="text tab_text" name="tab' + i + '" /> </label><br/>Choose Channel: ' +
                               '<select id="main_categories' + i + '" class="categories">' +
                               categories +
                           '</select>' +
                           '</div>');
       
           
           } // end for
           
           return false;
       }); // end tabs create
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

any help would be greatly appreciated.