My issue is that, even though I'm using different CDN links for my images, they both show up as whatever the first link is. The first image shows up and works fine with the fading process. The second image is just showing a copy of the first image even though the links are completely different. Is this an issue with my code or the jQuery I'm using? Is there a work around? Totally lost.

This is the code on my HTML page:

    <div class="guidecontainer">
        <div>
            <div class="element guidecontainer" data-crossfade-start="[redacted, valid CDN link for privacy reasons. this is the starting photo.]" data-crossfade-end="[redacted, valid CDN link for privacy reasons. this is the blur.]">
            </div>                
        </div>
        <div>
            <p class="guidetitle">Example Header</p>
        </div>
    </div>

    <div class="guidecontainer" style="height: 25%;"></div>

    <div class="guidecontainer">
        <div>
            <div class="element guidecontainer" data-crossfade-start="[redacted, valid CDN link for privacy reasons. this is the starting photo. this photo follows the one in the first div above.]" data-crossfade-end="[redacted, valid CDN link for privacy reasons. this is the blur, but it also follows the first images blur.]">
            </div>                
        </div>
        <div>
            <p class="guidetitle">Example Header</p>
        </div>
    </div>
</div>

    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://cdn.rawgit.com/mikefowler/crossfade.js/master/dist/crossfade.jquery.js"></script>
    <script type="text/javascript">
        $(function () {
          $('.element').crossfade();
        });
    </script>

My css:

.guidecontainer {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-x: hidden;
}

.guidetitle {
  font-size: 400%;
  font-family: inherit;
  color: white;
  top:0;
  position:absolute;
  text-align: left;
  padding:1em;
}

"Element" comes from jQuery.