在Ajax中制作JQuery Ajax

Question

The goal of this code is to make dinamical select input with option from database

$.ajax({
            url: "<?=site_url('purchase_order/getDataForPurchase')?>/" + $("#POID").val(),
            success: function(data){
                var xmlDoc = $.parseXML(data);
                var xml = $(xmlDoc);
                var display=[];
                var i=0;
                $("#selectedItems").html('');
                $.map(xml.find('orderItem').find('item'),function(val,k){
                    var idProduct = $(val).find('proi_product_id').text();
                    $("#selectedItems").append(
                        '<tr>'+
                            '<input type="hidden" id="idItem'+i+'" name="idItem'+i+'" value="'+idProduct+'>'+
                            '<td><select id="selItemUnit'+i+'" name="selItemUnit'+i+'"></select></td> '+
                        '</tr>'
                    );
                    $.ajax({
                        url: "<?=site_url('adjustment/getUnitsByProductID')?>/" + $("#idItem"+i).val()+"/0",
                        success: function(data1){
                            var xmlDoc1 = $.parseXML(data1);
                            var xml1 = $(xmlDoc1);
                            $.map(xml1.find('Unit').find('item'),function(val1,j){
                                var intID1 = $(val1).find('id').text();
                                var strUnit1=$(val1).find('unit_title').text();
                                $('#selItemUnit'+i).append('<option value="'+intID1+'">'+strUnit1+'</option>');
                            });
                        }
                    });                        
                    i++;
                });
            }
        });

the problem is that in the inner ajax, the value of i is always same. if the item is 2 than it always 2. Not 0,1.