Append Ajax Response Multiple Times Foreach Data Send

Question

I have a list of users who waiting for pending payment. I Would like to created a mass payment to users who have pending.

I created ajax request for that

<script>
jQuery(document).ready(function(){
    $("#boxesAll").click(function () {
        $('input[name="boxes[]').prop('checked', this.checked);
            $submit_act.toggle( $submit_box.is(":checked") );
          $submit_act_paid.toggle( $submit_box.is(":checked") );
        if($(this).is(':checked')){
            var numberChecked = $('input[name="boxes[]"]:checked').length;
            $('#count_item').html(numberChecked +' items');
            $('tr>td:first-child').addClass('bg-warning');
        } else {
            $('tr>td:first-child').removeClass('bg-warning');
        }
    });

    var id,resp,
      $submit_act = $(".btn-act").hide(),
      $count_item = $("#count_item").hide(),
      $submit_box = $('input[name="boxes[]"]').click(function() {
        $submit_act.toggle( $submit_box.is(":checked") );
        $count_item.toggle( $submit_box.is(":checked") );
    $('input[name="boxes[]"]').change(function() {
      $(this).parents('tr>td').toggleClass('bg-warning', $(this).is(':checked'));
    });
    var numberChecked = $('input[name="boxes[]"]:checked').length;
    $('#count_item').html(numberChecked +' items selected');
    });

  $('.btn-act').click(function(){
    var btnid = jQuery(this).attr("id");
    var page = '<?=$page;?>';
    id = [];
    $(':checkbox:checked').each(function(i){
      id[i] = $(this).val();
    });  
    if (confirm("Are you sure to "+btnid+" these items?")) {
     if(id.length === 0){
      alert("Please Select atleast one item(s).");
     }else{
        $.ajax({
            type: 'POST',
            url: '/<?=$settings['admin_dir'];?>?p=jquery&act='+btnid,
            data: {page:page,id:id},
            beforeSend: function() {
                $(".btn-act").attr("disabled", true);
                $(".btn-act").html('<span class="spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true"><span class="sr-only">Loading...</span></span> Please wait...');
            }
        }).done(function(t) {
            setTimeout(function() {  
                data = JSON.parse(t);
                if(data['result']=='success'){
                  var pages = "<?=$settings['admin_dir'];?>?p="+page;
                  if(data['type']=='payments'){
                    $(".btn-act").html('All Payment Paid');
                    $(".btn-act").attr("disabled", true);

                     for(var i=id.length; i>0; i--){
                      $("#action_response").append('<div id="resp">'+data['msg']+'</div>');
                     }
                      
                  }
                }else{
                    $(".btn-act").attr("disabled", false);
                    $(".btn-act").html('Failed to action');
                } 
            }, 3000);
            });
    }
    }
  });
});
</script>

And the php to process it

if($_GET['act']=="payments"){
    if(isset($_POST["page"]) && isset($_POST["id"])){
      foreach($_POST["id"] as $id){
        $details = getDetails('user_payments','id',$id);
        $user = getDetails('users','id',$details["user_id"]);
      }
            $msg = array(
              "result" => 'success',
              "type" => 'payments',
              "msg" => 'Successfully paid to '.$user['username']
            );
        echo json_encode($msg);
    }
  }

All code is working, but I have a problem about the result. The result always return in same result.

For example I checked 4 items for payments, the result goes here

Successfully paid to user1
Successfully paid to user1
Successfully paid to user1
Successfully paid to user1

The result I want is append each user that I checked.

Successfully paid to user1
Successfully paid to user2
Successfully paid to user3
Successfully paid to user4

So we know which user have been paid successfully. Let me know if someone can fix this

Answer 1

You only return one message in your ajax response.
To get the multiple results you have to build the message in a loop

if($_GET['act']=="payments"){
  if(isset($_POST["page"]) && isset($_POST["id"])){
    $msg = [];
    foreach($_POST["id"] as $id){
      $details = getDetails('user_payments','id',$id);
      $user = getDetails('users','id',$details["user_id"]);
      $msg[] = 'Successfully paid to '.$user['username'];
    }
    $response = array(
      "result" => 'success',
      "type" => 'payments',
      "msg" => $msg
    );
    echo json_encode($response);
  }
}

.

for(var i=id.length; i>0; i--){
  $("#action_response").append('<div id="resp">'+data.msg[i]+'</div>');
}