Adding out of stock to product card grid page - shopify

Question

I am trying to apply the following "out of stock" code to the product-card-grid.liquid page but it seems to only be working for one item, ie a single listing on the product-template.liquid, instead of all. I think this is because the referenced implementation is only for one page and not for multiple item listings. How do I update it so that this isn't the case?
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
<a class="grid-view-item__link grid-view-item__image-container" href="{{ product.url | within: collection }}">
{% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
{% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% unless product.featured_image == blank %}
{% include 'image-style' with image: product.featured_image, width: max_height, height: max_height, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
{% endunless %}
<div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper js">
<div style="padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%{% else %}100%{% endunless %};">
<img id="{{ img_id }}"
class="grid-view-item__image lazyload"
src="{{ product.featured_image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ product.featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ product.featured_image.alt | escape }}">
</div>
</div>
<noscript>
{% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
<img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: image_size, scale: 2 }}" alt="{{ product.featured_image.alt }}" style="max-width: {{ max_height | times: product.featured_image.aspect_ratio }}px;">
</noscript>
<div class="h4 grid-view-item__title">{{ product.title }}</div>
{% if section.settings.show_vendor %}
<div class="grid-view-item__vendor">{{ product.vendor }}</div>
{% endif %}
<div class="grid-view-item__meta">
{% include 'product-price' %}
</div>
{% unless product.available %}
<div id="sold-out" style="margin-top: 10px">
{% form 'contact' %}
{% if form.posted_successfully? %}
<p class="accent-text">Thanks! We will notify you when this product becomes available!</p>
{% else %}
<p><a id="notify-me" class="product-page-notify-me" href="#" style="color: #788188;">Email me when available</a></p>
{% endif %}
{% if form.errors %}
<div class="error feedback accent-text">
<p>Please provide a valid email address.</p>
</div>
{% endif %}
{% unless form.posted_successfully? %}
<div id="notify-me-wrapper" class="clearfix" style="display:none">
{% if customer %}
<input type="hidden" name="contact[email]" value="{{ customer.email }}" />
{% else %}
<input style="float:left; width:100%;" required="required" type="email" name="contact[email]" placeholder="your#email.com" class="styled-input{% if form.errors contains 'email' %} error{% endif %}" value="{{ contact.fields.email }}" />
{% endif %}
<input type="hidden" name="contact[body]" value="Please notify me when {{ product.title | escape }} becomes available." />
<input style="float:left;" class="btn styled-submit" type="submit" value="Send" />
</div>
{% endunless %}
{% endform %}
</div>
{% endunless %}
</a>
</div>
UPDATE
I've tried editing the jQuery as follows, which fixes it but the submit button sends an email for all the items on the product listing page:
jQuery('.notify-me').click(function() {
jQuery($(this).closest('.contact-form').find('.notify-me-wrapper').fadeIn());
return false;
});