Wordpress div not showing on localhost version of site - php

Question

I've got 2 versions of a site, a live testing version and a local version.
I'm currently working on the local version, using MAMP. The backend of both sites is identical, I've ensured that the admin of each site is exactly the same.
I'm trying to add images to the site via the Edit Page section, but the images aren't displaying.
I inspected the site to see any errors, none were found, however I came acrosss something interesting.
After comparing the html markup of the 2 site versions side by side, I noticed that my local version is missing the the div that displays images.
Here is the div on the live version -
Here is the my local version, in which the div is not being shown -
As you can see in the local version there is a ul instead of div class="image-16-8.
Here is the php file that is displaying these images
<?php
function tbhHeroShortcode($atts)
{
$values = shortcode_atts(array(
'images' => '',
'first-line' => '',
'second-line' => '',
'video' => '',
'link' => '',
), $atts);
ob_start();
?>
<div class="hero">
<?
$images = decode_shortcode_data($values['images']);
if ($images): ?>
<ul data-simple-slider>
<?php foreach ($images as $image): ?>
<li>
<div class="image-16-8" style="background-image: url(<?= $image->url; ?>); "></div>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<div class="hero-content">
<div class="hero-content-first-line">
<h1 class="header"><?= decode_shortcode_data($values['first-line']) ?></h1>
</div>
<h1 class="italic-header"><?= decode_shortcode_data($values['second-line']) ?></h1>
<div class="hero-content-cta">
<a class="hollow-button" href="<?= decode_shortcode_data($values['link']) ?>">Learn More</a>
</div>
</div>
<?php if (count($images) > 1): ?>
<div class="hero-controls">
<i class="fa fa-chevron-left hero-controls__left" aria-hidden="true"></i>
<i class="fa fa-chevron-right hero-controls__right" aria-hidden="true"></i>
</div>
<?php endif; ?>
</div>
<?php
$component = ob_get_contents();
ob_end_clean();
return $component;
}
add_shortcode('tbhHero', 'tbhHeroShortcode');
Does anyone have any idea of why this is happening?

Answer 1

Well the ul is showing because it's right there in your php
<div class="hero">
<?
$images = decode_shortcode_data($values['images']);
if ($images): ?>
<ul data-simple-slider>
However, on your screenshot from the live version your hero div is different, it looks like this
<div class="hero" id>
The output you are seeing is not being generated by the same file, so either there is some browser/server caching going on and what you are seeing from the live site doesnt reflect the current state of your php, or somehow your php file updates are out of sync between your two environments.

Answer 2

I would guess that the difference between the two sites is in the "edit page" area of whatever page is serving as the home page. I would expect that local version has a shortcode called [tbh-hero] on it with image listed, while the other one doesn't have any images listed or perhaps doesn't have a shortcode on it at all. But, honestly, there are a lot of ways that that code could be implemented within the structure of a given theme.