Multiple B/A on a page, but only the first shows up until refresh

I’m using Elementor and I’ve added a code snippet on a template. This snippet loads multiple Before and After instances dynamically. If the fields are populated then one, two, three or four B/As will show. If none of them are populated then nothing shows. But we’re having an issue, if there are more than one B/A on a page the second through fourth don’t always show, not until the page is refreshed. This doesn’t happen all of the time, but often enough to be a problem. It doesn’t seem to be a browser issue, happens on Windows and Mac, Firefox and Safari.

Here is the code snippet if this helps, the snippet is added to the template page via a shortcode:

<?php
$before1 = get_field("before_image_1");
$after1 = get_field("after_image_1");
$before2 = get_field("before_image_2");
$after2 = get_field("after_image_2");
$before3 = get_field("before_image_3");
$after3 = get_field("after_image_3");
$before4 = get_field("before_image_4");
$after4 = get_field("after_image_4");
?>

<?php if (!empty($before1)) {
?>
<!-- <h2 style="color: white; background: #416BA9; font-size: 14.4px; line-height: 26px; font-family: 'Roboto'; font-weight: 500; letter-spacing: 2px; padding: 2px 2px 2px 10px;">BEFORE AND AFTER</h2> -->

[twenty20 img1="<?php echo $before1; ?>" img2="<?php echo $after1; ?>" offset="0.5"]
<?php } ?>

<?php if (!empty($before2)) {
?>
[twenty20 img1="<?php echo $before2; ?>" img2="<?php echo $after2; ?>" offset="0.5"]
<?php } ?>

<?php if (!empty($before3)) {
?>
[twenty20 img1="<?php echo $before3; ?>" img2="<?php echo $after3; ?>" offset="0.5"]
<?php } ?>

<?php if (!empty($before4)) {
?>
[twenty20 img1="<?php echo $before4; ?>" img2="<?php echo $after4; ?>" offset="0.5"]
<?php } ?>

Thanks for any help you can lend.

The page I need help with: [log in to see the link]