Append Ajax Response Multiple Times Foreach Data Send - php

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>');
}