Error/success states propagate across multiple customer forms on the same page

[ineptian]

I have two customer email signup forms that can show on my website. One in a modal popup, and one is persistent in the footer. For some reason error / success state will trigger on both my forms, so if I am at the top of the website and use the modal, I am sent down to the footer and the error/success will show in both the modal, and the form in the footer.

Both the forms have separate id's. I am using a custom theme based off dawn. Anyone ran into this or have any ideas to fix?

Footer and modal form code below:

{%- form 'customer', id: 'footerNewsletter', class: 'footer__newsletter y-newsletter-form tw-mt-6' -%}
          <input type="hidden" name="contact[tags]" value="newsletter">
          <input type="text" name="contact[note][source]" value="newsletter" hidden>
            <div class="y-newsletter-form__field-wrapper">
              <div class="field">
                <input
                    id="footerNewsletterForm--{{ section.id }}"
                    type="email"
                    name="contact[email]"
                    class="field__input"
                    value="{{ form.email }}"
                    aria-required="true"
                    autocorrect="off"
                    autocapitalize="off"
                    autocomplete="email"
                    {% if form.errors %}
                      autofocus
                      aria-invalid="true"
                      aria-describedby="footerNewsletter-error"
                    {% else if form.posted_successfully? %}
                      aria-describedby="footerNewsletter-success"
                    {% endif %}
                    placeholder="{{ 'newsletter.label' | t }}"
                    required
                  >
                  <label class="field__label" for="footerNewsletterForm--{{ section.id }}">
                    {{ 'newsletter.label' | t }}
                  </label>
                  <button type="submit" class="y-newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">
                    {% render 'icon-arrow' %}
                  </button>
                </div>
              </div>
              {%- if form.errors -%}
                {%- liquid
                  assign email_registered = false
                  if form.errors.messages.size == 1
                    for message in form.errors.messages
                      if message contains "note"
                        assign email_registered = true
                      endif
                    endfor
                  endif
                -%}
                {%- if email_registered -%}
                  <small class="y-newsletter-form__message form__message" id="footerNewsletter-error">{% render 'icon-error' %} Email Is Already Registered</small>
                {%- else -%}
                  <small class="y-newsletter-form__message form__message" id="footerNewsletter-error">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
                {%- endif -%}
              {%- endif -%}
              {%- if form.posted_successfully? -%}
                <h3 class="y-newsletter-form__message y-newsletter-form__message--success form__message" id="ContactFooter-success" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>
              {%- endif -%}
            {%- endform -%}

{%- form 'customer', id: 'modalNewsletter', class: 'modal__newsletter y-newsletter-form tw-mt-4' -%}
              <input type="hidden" name="contact[tags]" value="newsletter">
              <input type="text" name="contact[note][source]" value="newsletter" hidden>
              <div class="y-newsletter-form__field-wrapper">
                <div class="field">
                  <input
                    id="modalNewsletterForm"
                    type="email"
                    name="contact[email]"
                    class="field__input"
                    value="{{ form.email }}"
                    aria-required="true"
                    autocorrect="off"
                    autocapitalize="off"
                    autocomplete="email"
                    {% if form.errors %}
                      autofocus
                      aria-invalid="true"
                      aria-describedby="modalNewsletter-error"
                    {% elsif form.posted_successfully? %}
                      aria-describedby="modalNewsletter-success"
                      disabled
                    {% endif %}
                    placeholder="{{ 'newsletter.label' | t }}"
                    required
                  >
                  <label class="field__label" for="modalNewsletter">
                    {{ 'newsletter.label' | t }}
                  </label>
                  <button type="submit" class="y-newsletter-form__button field__button" name="commit" id="modalSubscribe" aria-label="{{ 'newsletter.button_label' | t }}">
                    {% render 'icon-arrow' %}
                  </button>
                </div>
              </div>
              {%- if form.errors -%}
                  {%- liquid
                    assign modal_email_registered = false
                    if form.errors.messages.size == 1
                      for message in form.errors.messages
                        if message contains "note"
                          assign modal_email_registered = true
                        endif
                      endfor
                    endif
                  -%}
                  {%- if modal_email_registered -%}
                    <small class="y-newsletter-form__message form__message" id="modalNewsletter-error">{% render 'icon-error' %} Email is already registered</small>
                  {%- else -%}
                    <small class="y-newsletter-form__message form__message" id="modalNewsletter-error">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>
                  {%- endif -%}
                {%- endif -%}
              {%- if form.posted_successfully? -%}
                <h3 class="y-newsletter-form__message y-newsletter-form__message--success form__message" id="modalNewsletter-succes" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>
              {%- endif -%}
            {%- endform -%}