I need to display item code after selecting description in every row. the first row works fine, but after adding 2nd,3rd rows it doesn't work.

<script>
$(document).ready(function(){
/*add new row in table after clicking the addrow button*/
var count = $(".itemRow").length;
$(document).on('click', '#addRows', function() {
count++;
  var htmlRows = '';
   htmlRows += '<tr>';
   htmlRows += '<td><div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input itemRow" id="itemRow_'+count+'"> <label class="custom-control-label" for="itemRow_'+count+'"></label> </div></td>';
   htmlRows += '<td><select name="itemcode[]" id="itemcode" class="form-control form-control-sm loadIcode" autocomplete="off" disabled style="width:50%"><option value=""></option></select></td>';
   htmlRows += '<td><select name="description[]" id="itemname" class="form-control form-control-sm loadIcode" autocomplete="off" style="width:50%"><option value="" disabled selected>Select Item Description<?php echo fill_description($connect);?></option></select></td>';
   htmlRows += '</tr>';

  $('#invoiceItem').append(htmlRows);
  $('.loadIcode').change(function(){
   if($(this).val() != '')
   {
    var loadIcode = $(this).attr("id");
    var query = $(this).val();
    var result = '';
    if(loadIcode == "itemname")
    {
      result = 'itemcode';


    }
    $.ajax({
     url:"result.php",
     method:"POST",
     data:{loadIcode:loadIcode, query:query},
     success:function(data){
      $('#'+result).html(data);
     }
    })
   }
  });
 });
});    
</script>

enter image description here