<?php 
    $list = get_sub_field('list');
    $i = 1;
?>
<style>
	.counters2{
		display:block !important;
		font-size:60px !important;
		color:white;
	}
</style>

    <div class="container"> 
        <?php if($list):?>
            <script>
                const targetValues =[];
            </script>
            <div class="nums_block">

                <?php foreach($list as $list_item): ?>
                <?php $num = intval($list_item['num']); ?>
                <div class="nums_block-card counter<?php echo $i ?>"> 
                    <?php if($list_item['prefix']):?><p class="top"><?php echo $list_item['prefix'] ?></p><?php else: ?><p class="top visibility-hidden">*</p><?php endif;?>
					<div class="block_flex" style="display:flex;align-items:center;">
						
					
					<p class="center " id="counter<?php echo $i ?>"><?php if($list_item['num']):?><?php if($num >= 10): ?>0<?php else: ?><?php echo $list_item['num'] ?><?php endif;?><?php endif;?> </p>
<!-- 						<div class=" counters<?php echo $i ?>" style="display:none;">%</div> -->
						</div>
                    <?php if($list_item['suffix']):?>
                        <?php if($list_item['sub_suffix']):?>
                            <p class="bottom">                                
                                        <?php echo $list_item['suffix'] ?><br />                                    
                            </p>
                            <span><?php echo $list_item['sub_suffix'] ?></span> 
                        
                        <?php else: ?>
                            <p class="bottom">                                
                                        <?php echo $list_item['suffix'] ?><br />                                    
                            </p>
                        <?php endif;?>
                    <?php endif;?>
                </div>         
                <script>
                    targetValues.push(<?php echo $list_item['num'] ?>); 
                </script>
                <?php $i = $i + 1; endforeach; ?> 
                
            </div>
            <script>
                document.addEventListener("DOMContentLoaded", function () {
                    var counters = [
                    document.getElementById("counter1"),
                    document.getElementById("counter2"),
                    document.getElementById("counter3"),
                    ];
                    console.log(targetValues);
                    
                    var duration = 700;
                    var interval = 30;

                    counters.forEach(function (counter, index) {
                    var increment = targetValues[index] / (duration / interval);
                    var currentValue = 0;

                    function updateCounter() {
                        if (currentValue < targetValues[index]) {
                        currentValue += increment;
                        counter.textContent = Math.round(currentValue);
                        setTimeout(updateCounter, interval);
                        } else {
                        counter.textContent = targetValues[index];
                        }
                    }

                    updateCounter();
                    });
                });    
            </script> 
        <?php endif;?>
    </div>