duplicate result to extract data from array

i´m traying to extract data from my array and append this data to span.

i´m working with laravel and blade

first i´m doing loop to get data from one array and create div and span in this div:

@foreach ($status as $sta)
            <div class="col-md-3">
                <span class="font-weight-bold">{{ $sta }}:</span><span class="porcentaje ml-2"></span>
            </div>
        @endforeach

after i´m doing loop in jquery to other array that contain value for status:

<script>
        let total = {!! json_encode($totalCall) !!};
        
        $.each(total, function(valor, indice) {
            $(".porcentaje").text(valor);
        });
        
    </script>

total it´s array that contain this values:

[3, 3, 4, 3]

but when i do text in my span i´m getting this:

AUSENTE:3
CONFIRMADA:3
NUEVA:3
NULA:3

this it´s differents status and i need append this data in this status. I don´t know that i´m doing wrong.

Thanks for help me and read me. Sorry for my english

If the statuses and the totals all correspond, which it looks like they do, then why have two separate loops? Just output the totals as you go through your statuses?

@php $i = 0; @endphp
@foreach($status as $sta)
    <div class="col-md-3">
        <span class="font-weight-bold">{{ $sta }}:</span><span class="porcentaje ml-2">{{ $totalCall[$i] }}</span>
    </div>
    @php $i += 1; @endphp
@endforeach