Change class of the last instance of an item within a loop with WordPress/ACF - php

Question

I want to insert an arrow image between each div with the class product-icon in a WordPress loop using the ::after CSS pseudo-element. Right now the arrow shows up after every product-icon div the loop populates, but I want it to be hidden after the last one (and the number of divs displayed changes depending which page you're on). I'm guessing I'll need to change the class of the last div in the loop, but I'm not sure how to do that. Here's an HTML version so you can see what it should look like:
<section id="case-study-product-overview" class="horizontal">
<div class="max-container">
<div id="product-map-container">
<div>
<div class="product-icon"><img src="https://cdn4.iconfinder.com/data/icons/basic-for-user-interface-vol-1/24/add-_plus-_create_-square-_Add_Button-512.png"><p class="icon-subtitle">Icon 1</p></div>
<div class="product-card">
<h3 class="product-overview-title green-text">Title 1</h3>
<img class="product-image" src="https://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png">
<p class="blurb">Lorem ipsum dummy paragraph text.</p>
</div>
</div>
<div>
<div class="product-icon"><img src="https://cdn4.iconfinder.com/data/icons/basic-for-user-interface-vol-1/24/add-_plus-_create_-square-_Add_Button-512.png"><p class="icon-subtitle">Icon 2</p></div>
<div class="product-card">
<h3 class="product-overview-title green-text">Title 2</h3>
<img class="product-image" src="https://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png">
<p class="blurb">Lorem ipsum dummy paragraph text.</p>
</div>
</div>
<div>
<div class="product-icon"><img src="https://cdn4.iconfinder.com/data/icons/basic-for-user-interface-vol-1/24/add-_plus-_create_-square-_Add_Button-512.png"><p class="icon-subtitle">Icon 3</p></div>
<div class="product-card">
<h3 class="product-overview-title green-text">Title 3</h3>
<img class="product-image" src="https://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png">
<p class="blurb">Lorem ipsum dummy paragraph text.</p>
</div>
</div>
</div>
</div>
</section>
here's the PHP I am ACTUALLY working with:
<section id="case-study-product-overview" class="horizontal">
<div class="max-container">
<h2 class="cs-heading eaton-blue-text">Product Overview</h2>
<div id="product-map-container">
<?php if ( have_rows('product_overview_map') ): ?>
<?php while( have_rows('product_overview_map') ): the_row(); ?>
<div>
<!-- ** This line is what the arrow should come after, except the last one** -->
<div class="product-icon"><img src="<?php echo get_sub_field('product_overview_icon'); ?>"/>
</div>
<!-- -->
<p class="icon-subtitle"><?php echo get_sub_field('product_overview_icon_label'); ?></p>
<div class="product-card">
<h3 class="product-overview-title eaton-blue-text"><?php echo get_sub_field('product_title'); ?></h3>
<img class="product-image" src="<?php echo get_sub_field('product_image'); ?>" />
<p class="blurb"><?php echo get_sub_field('product_description'); ?></p>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</section>
and the CSS:
#case-study-product-overview .ecosystem-diagram {
min-height:650px;
margin-top:3%;
}
#case-study-product-overview .ecosystem-item {
position:absolute;
width:250px;
align-items:center;
margin-left:-125px;
margin-top:-100px;
}
#case-study-product-overview .image {
width:300px;
height:300px;
display:flex;
align-items:flex-end;
}
#case-study-product-overview .image img {
max-height:250px;
max-width:245px;
}
.product-icon::after {
content: url(http://wordpress-dev.tcc.etn.com/wordpress/iot/wp-content/uploads/sites/11/2019/07/arrows.png);
position: absolute;
top: 25px;
margin:0 32px;
}
.last-product-icon::after {
content:'';
}
.product-icon > img {
width: 50px;
height: 50px;
}
#product-map-container {
display: flex;
margin: 50px 0;
justify-content: center;
position: relative;
}
#product-map-container > div {
margin: 10px;
text-align: center;
}
.product-card {
box-shadow: 1px 1px 6px 1px #999;
max-width: 240px;
min-height: 475px;
padding: 10px;
}
.product-image {
width: 200px;
margin:auto;
}
Any help would be greatly appreciated. Thanks!