Почему счётчик увеличивается а receiver неизменный?

Question

$('.btn-query-auth').on('click',function(){
         url = '/project/queryauth';
         let projectId = $(this).attr('data-btn-id'),
          receiver, email;
         $.post(url, {projectId:projectId}, function(data){
          $('#modal-body-query-auth').html(data);
          $('#modal-body-query-auth').ready(function(){
           let qac = $('.qa-container');
           for (let i=0; qac.length>i; i++){
            receiver = $(qac[i]).attr('data-qu-from');
            console.log(receiver);
                        url = '/project/queryauth/data';
            $.post(url, {projectId:projectId,receiver:receiver}, function(data){
             console.log(receiver);
             console.log(i);
            });
           }
          });
         });
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="modal-body-query-auth" class="modal-body">    
        <div id="qa-container-4" class="qa-container" data-qu-from="4">
        </div>
    <div id="qa-container-5" class="qa-container" data-qu-from="5">
        </div>
    <div id="qa-container-2" class="qa-container" data-qu-from="2">
        </div>
    </div>

Console:

1 проход---> receiver=2 i=0

2 проход---> receiver=2 i=1

3 проход---> receiver=2 i=2

Почему переменная не изменяется, хотя должна иметь индекс следующего дива.