title: how to use the same ajax call on the created dropdown list
body: <p>dears , i have one table to show the list of category and i need to add unlimited drop down list which will be nested from the parent 
  like
  category  A 
  Category B , if selected B it will add another dropdown and added it into data base and will add another dropdown list sub b1 , sub 2 and if user select sub 2 will do the same </p>
  
  <p>can anyone help 
   
          $(document).ready(function(){</p>
  
  <pre><code>        //$('.form-control').change(function(){ 
  
           $('select.form-control').on('change', function () {
               var selectedCategory = $(this).children("option:selected").val();
  
               var counter = 1;
            //alert( $(this).find('option:selected').text());
           //var deptid = $('#category option:selected').attr("id");
                var name = "Sub "+ $(this).children("option:selected").text();
  
           if(selectedCategory!=''){
  
             $.ajax({
                   url: "&lt;?php echo base_url(); ?&gt;category/add_new",
                   type: 'POST',
                   data: {'category_parent':selectedCategory,'category_name':name},
                   dataType: 'json',
                   async: false ,
                   cache:false,
                   success:function(data){
                     alert(data);
                     if($('#category'+data).length)
                            return;
                        else{
                             $("#groupd").after('&lt;div id="sub'+data+'" class="form-group"&gt;' +
                         '&lt;label&gt;' +name +' : &lt;/label&gt;' +
                         '&lt;select class="form-control" name="dropdown' + counter + '"  id="category'+data+'"&gt;' +
                          // Add your options here...
                         '&lt;option&gt;Please Select&lt;/option&gt;'+
                         '&lt;option value="'+data+'"&gt;'+name +'1&lt;/option&gt;'+
                         '&lt;option value="'+data+'"&gt;'+name +'2&lt;/option&gt;'+
                         '&lt;/select&gt;&lt;/div&gt;');
                          counter++; 
                        }
                     },
  
                  error:function(){
                        alert('error');
                  }
      });
           }
  
  
          }); 
  
      });
  &lt;/script&gt;
  </code></pre>