Add one class at a time in a div starting from a php (wordpress) array with jquery

I created a loop in php that cycles through an array. Now I would like to add the array information as a class of the div, one at a time. However when I use the code below it prints all the contents of the array as a class in one go. How can I fix the code? I am attaching everything. A thousand thanks

<?php
          $order_status = array_keys( wc_get_order_statuses());
                  $customer_orders = get_posts( apply_filters( 'woocommerce_my_account_my_orders_query', array(
            'post_type'             => 'shop_order',
                    'numberposts' => - 1,
                    'meta_key'    => '_customer_user',
                    'meta_value'  => get_current_user_id(),
                    'post_type'   => wc_get_order_types( 'view-orders' ),
                    'post_status'           => 'wc-completed',
            'date_query' => array(
                'after' => date('Y-m-d', strtotime('-3 days')))
                ) ) );
        $counter = 0;

                foreach ( $customer_orders as $customer_order ) {
                    $order = new WC_Order( $customer_order );
          foreach ( $order->get_items() as $item_id => $item ) :
          endforeach;
                    $date = esc_html( wc_format_datetime( $order->get_date_created() ) );
?>

          <?php $date_comp = $order->get_date_completed(); ?>
          <?php $product = wc_get_product( $item->get_product_id() ); ?>
          <?php $product_id = $item->get_product_id(); ?>


          <?php $counter++ ?>
?>

<?php
            $product_arr[] = $product->name;
                        $product_name = $product_arr;
?>



<script>
    $(".cf7-refund").addClass('<?php echo $product_name[$counter]  ?>');
</script>
Copy code

however the result of the above code is something like this:

1 <div class="class_1 class_2 class_3"> </div>
2 <div class="class_1 class_2 class_3"> </div>
3 <div class="class_1 class_2 class_3"> </div>
Copy code

while I would like to obtain:

1 <div class="class_1"> </div>
2 <div class="class_2"> </div>
3 <div class="class_3"> </div>
Copy code

thank you in advance

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.