php - Using ajax on select change for multiple selects -

i have table row added ability add/remove using .clone , .remove

i have ajax call controller in code igniter grab data , populate other inputs based on data.

it works 1 first one, able select option dropdown , fills values of neighboring inputs. problem when click add , clones row, when change dropdown .change , .ajax events no longer work.

here jquery here think having problem:

$('.invoice_line_item').each(function(){     $(this).change(function(){          var table = $(this).closest('.tr_clone');          var select_value = $(this).val();         //alert(item_id + ' ' + select_value);         console.log(item_id + select_value);           $.ajax({             url: '<?php echo site_url("invoice_item/get_item"); ?>',             type: 'post',             datatype: "json",             data: ({'id' : select_value}),             success: function (data, status)             {                 //alert('success ' + data);                 console.log(data);                 $(table).find('.description').val(data['work_description']);                 $(table).find('.amount').val(data['amount']);                 $(table).find('.quantity').val(data['quantity']);                 $(table).find('.price').val(data['amount']);             },             error: function (data, xhr, desc, err)             {                 alert('an error occurred: ' + xhr + ' ' + desc + ' ' + err);                 console.log(data);             }         });      }); }); 

here html:

<tbody>   <tr class="tr_clone" id="inv_line_1">     <td>         <select id="line_item_1" name="invoice_line_item" class="invoice_line_item">             <option></option>             <?php     foreach($prefix_line_items $line_item)     {         ?>         <option value="<?php echo $line_item['id']; ?>"><?php echo $line_item['item']; ?></option>         <?php     }     ?>         </select>     </td>     <td><input type="text" id="description_1" name="description" class="description" value="" /></td>     <td><input type="currency" id="amount_1" name="amount" class="amount" value="" /></td>     <td><input type="number" id="quantity_1" name="quantity" class="quantity" value="" /></td>     <td><input type="currency" id="price_1" name="price" class="price" value=""  readonly/></td>     <td><a href="#" onclick="return false;" class="add-line-item"><i class="fa fa-plus"></i></a>   <a href="#" onclick="return false;" class="remove-line-item"><i class="fa fa-minus"></i></a></td>   </tr> </tbody> 

no errors in console, works first time first row when click add button , duplicates row, change (cloned) select element , jquery no longer fires isnt grabbing data via ajax or printing console.

while cloning element, default, not copy event handlers new elements. have pass true tell clone method so. practice clone element , copy required events manually new element.

check below example given on jquery's website,

/ original element attached data  var $elem = $( "#elem" ).data( "arr": [ 1 ] ),      $clone = $elem.clone( true )        

hope helps..