My new div isn't being recognized on my site, why?

Question

I sliced and diced an existing class: product__info and created a new one: product__purchase under the same parent class product product-- as such:

<section class="page-width section-{{ section.id }}-padding">
  <div class="product product--{{ section.settings.media_size }} product--{{ section.settings.gallery_layout }} grid grid--3-col {% if product.media.size > 0 %}grid--3-col-tablet{% else %}product--no-media{% endif %}">
    <div class="grid__item product__media-wrapper">
    </div>
    <div class="product__purchase-wrapper grid__item{% if settings.page_width > 1400 and section.settings.media_size == "small" %} product__purchase-wrapper--extra-padding{% endif %}">
      <div id="Product-{{ section.id }}" class="product__purchase-container{% if section.settings.enable_sticky_info %} product__purchase-container--sticky{% endif %}">
      </div>
    </div>
    <div class="product__info-wrapper grid__item{% if settings.page_width > 1400 and section.settings.media_size == "small" %} product__info-wrapper--extra-padding{% endif %}">
      <div id="Product-{{ section.id }}" class="product__purchase-container{% if section.settings.enable_sticky_info %} product__purchase-container--sticky{% endif %}">
      </div>
    </div>
  </div> 
</section>

However, this new section: product__purchase is not appearing on my development site, only the two original classes: product__media and product__info.

What I see on my development site:

Does anyone have any idea why this is the case? Could it be that I used the same id id=Product-{{ section.id}} ... for the new div class?

As always, thanks for your time :-)