Populating a drop-down list in Appended Table Row

Question

I have a table in which rows can be added dynamically when a button is clicked. In each dynamic row, there are text fields and a drop-down list. The drop-down is populated from the database using jquery and a function in the model

Script

$('td #add_fields').click(function(){
item_count++;
 var url = baseURL+'interfaces/population';
$.ajax({           
   type: "GET",
   url: url,                          
   data:'',                        
   dataType: 'json',                  
   success: function(res){
   $('#item_body').append('<tr id="item_row">'+
     '<th>'+item_count+'</th>'+
     '<td>'+
     '<select class="form-control" id="item_name" name="item_name" style=" width:150px;">'+
     '<option value="none" selected="" disabled="">Select Item</option>');
        for(i in res) 
   $('#item_body').append('<option value="">'+res[i].item_name+'</option>');
   $('#item_body').append('</select>'+
       '</td>'+
       '<td><input type="text" name="qty_unit" id="qty_unit" class="form-control"></td>'+
       '<td><input type="text" name="price_p_u"  id="price_p_u" class="form-control"></td>'+
       '<td>'+
       '</td>'+
       '<td><input type="text" name="qty" id="qty" class="form-control"></td>'+
       '<td><input type="text" name="total_price" id="total_price" class="form-control"></td>'+
       '<td><input type="button" name="" class="btn btn-danger remove_fields" value="X" ></td>'+
       '</tr>');
     } 
 }); });

Model

public function get_item_data_app(){
$this->db->order_by('item_name');
$query=$this->db->get('stock');
$result=$query->result_array();
return $result;
}

I am able to get the data to populate the drop-down the list, however, it is not displaying in the drop-down list.

Image1

---

Image2

From the image1, the drop-down list data is not displaying in the drop-down list but on a different row and I don't get why it is doing so. But it would like it to display just like it is seen in image2 whenever the button is clicked.

Answer 1

Like Bilal and Rishi suggested,the issue was the html part.In the append function,the looping option had to be appended to the select and also set dynamic the ids' for the looping optioncreated on button click

$('td #add_fields').click(function(){
item_count++;
 var url = baseURL+'interfaces/population';
$.ajax({           
        type: "GET",
        url: url,                           
        data:'',
        dataType: 'json',       
        success: function(res){
        $('#item_body').append('<tr id="item_row_add'+item_count+'">'+
        '<th>'+item_count+'</th>'+
        '<td>'+
        '<select class="form-control" id="item_name" name="item_name" style=" width:150px;">'+
        '<option value="none" selected="" disabled="">Select Item</option>');
         for(i in res){ 
        $('#item_row_add'+item_count+' select').append('<option value="'+res[i].id+'">'+res[i].item_name+'</option>');}
        $('#item_row_add'+item_count+'').append('</select>'+
        '</td>'+
        '<td><input type="text" name="qty_unit" id="qty_unit" class="form-control"></td>'+
        '<td><input type="text" name="price_p_u"  id="price_p_u" class="form-control"></td>'+
        '<td>'+
        '<select name="unit-type" id="unit-type" class="form-control" style=" width:90px;">'+
        '<option value="Unit">Unit</option>'+
        '<option value="Sub-Unit">Sub-Unit</option>'+
        '<option>Unit&Sub</option>'+
        '</select>'+
        '</td>'+
        '<td><input type="text" name="qty" id="qty" class="form-control"></td>'+
        '<td><input type="text" name="total_price" id="total_price" class="form-control"></td>'+
        '<td><input type="button" name="" class="btn btn-danger remove_fields" value="X" ></td>'+
        '</tr>');
            } 
 }); });

Answer 2

HTML

        your city :-
                <tr>

                  <select id="state" onchange="getCity()" >
                    <option value="na"  >Select State</option>
                      <?php
                       if (isset($state)) {
                        foreach ($state as $s) {                                            
                         echo '<option value="' . $s->id . '">' . $s->loc. '</option>';
                        }                                      
                      }  ?>
                 </select>

SCRIPT

    function getCity(){

    var state=$('#state').val();

    $.ajax({
        url: "<?php echo base_url() ?>pms1/getCity/"+state, 
        dataType: "json",
        success: function(result){
            $('#city').html('<option>SELECT</option>');
           $.each( result, function( key, value ) {

              $('#city').append('<option value='+key+'>'+value+'</option>');
            });  
    }});

 }

This works on Onchange(), what you might be doing wrong must be HTML part.