Unable to append to a find element

I am running a check to see if the data-attribute, availability is Yes or No. If it is no, I am finding that specific .smallCatalogBlock and wanting to append the .soonOverlay on top of it.

As on now, the element is not being appended to .smallCatalogBlock. I have a console.log check in place to see if the condition is running successfully, and it is, with the correct number of found elements. The html just isn't being appended.

Does anyone see what I am doing wrong?

$('.smallCatalogBlock').each(function() {
  if ($(this).data('availability') === 'No') {
    $(this).find('.smallCatalogBlock').append('<div class="soonOverlay"><div class="soonOverlayInner"><div class="total-center"><p class="dGw">Coming Soon</p></div></div></div>');
    console.log("It should be working");
  }
});

.smallCatalogWrap {
        width: 100%;
        height: auto;
        margin: 60px 0;
}
.smallCatalogBlock {
        width: 25%;
        height: auto;
        display: inline-block;
        vertical-align: top;
        margin: 20px auto;
        text-decoration: none;
}
.smallCatalogBlock img {
        width: 80%;
        height: auto;
        box-shadow: 10px 5px 5px rgba(0,0,0,.3);
        display: block;
        margin: 0px auto 15px auto;
}
.smallCatalogTitle {
        font-family: 'Nunito', sans-serif;
        color: #4d4d4d;
        font-size: 1.3rem;
        text-align: center;
        display: block;
        font-weight: 400;
}
.comingSoonSmall {
        position: relative;
}
.comingSoonSmall .soonOverlay {
        width: 80%;
        height: 100%;
        background: #b82222;
        opacity: .8;
        position: absolute;
        top: 0;
        margin: 0 10%;
}
.soonOverlayInner {
        position: relative;
        min-height: 350px;
}
.soonOverlayInner .dGw {
        font-weight: 600;
        text-transform: uppercase;
        font-size: 2.5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smallCatalogWrap">
  <div class="smallCatalogBlock" data-availability="Yes">
    <span class="smallCatalogTitle">A</span>
    <div class="smallCatalogButtonWrap">
      <div class="catalogSmallCircle"></div>
    </div>
  </div><div class="smallCatalogBlock comingSoonSmall" data-availability="No">
    <span class="smallCatalogTitle">B</span>
    <div class="smallCatalogButtonWrap">
      <div class="catalogSmallCircle"></div>
    </div>
  </div><div class="smallCatalogBlock comingSoonSmall" data-availability="No">
    <span class="smallCatalogTitle">C</span>
    <div class="smallCatalogButtonWrap">
      <div class="catalogSmallCircle"></div>
    </div>
  </div>
</div>