Not triggering when more than one form is on a page

[proimage]

In a CMS-constructed page, there are two forms. Only the first form's fields have working floating labels. None of the fields have duplicate IDs. When I comment out the code that generates the first form, leaving the second untouched, its labels begin to work.

Here's the code:

<form  method="post" data-id="845559-form-8oWe9jZpP_0dc8_fdd809d4329c1eff56f72fcd7bfe9c81b00683e85de557dc0de83" >  

  <div class="form-rows">

    <div class="form-row ">
      <div class="form-column  ffl-wrapper">
        <label for="form-input-name" class="ffl-label required">Name</label>
        <input  class=" " name="name" type="text" id="form-input-name" required />
      </div>
      <div class="form-column  ffl-wrapper">
        <label for="form-input-contact-email" class="ffl-label required">Email</label>
        <input  class name="contact-email" type="email" id="form-input-contact-email" required />
      </div>
    </div>

    <div class="form-row ">
      <div class="form-column  ffl-wrapper">
        <label for="form-input-companyName" class="ffl-label">Company / Organization</label>
        <input  class=" " name="companyName" type="text" id="form-input-companyName"/>
      </div>
    </div>

    <div class="form-row ">
      <div class="form-column  ffl-wrapper">
        <label for="form-input-message" class="ffl-label required">Message</label>
        <textarea  class name="message" id="form-input-message" rows="5" required ></textarea>
      </div>
    </div>

    <div class="form-row ">
      <div class="form-column  has-button align-left ffl-wrapper">
        <button class="button hollow" data-submit-button="1" type="submit" name="form_page_submit">Send Your Message<svg class="icon--arrow-right icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon--arrow-right"></use></svg></button>
      </div>
    </div>

  </div>

</form>

<form  method="post" data-id="977faa-form-5KM0OK02p_0dc8_3ba58d3b88de3a87a5ef3bf65d18211243a4ef955de557dc139f9" >
  <div class="form-rows">

    <div class="form-row ">
      <div class="form-column  ffl-wrapper">
        <label for="form-input-email" class="ffl-label required">Email</label>
        <input  class name="email" type="email" id="form-input-email" required />
      </div>
      <div class="form-column  has-button align-right ffl-wrapper">
        <button class="button" data-submit-button="1" type="submit" name="form_page_submit">Subscribe<svg class="icon--arrow-right icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon--arrow-right"></use></svg></button>
      </div>
    </div>

  </div>
</form>

There is a console error, but it doesn't change when I remove the first form:

floatingFormLabels.min.js:formatted:1 jQuery.Deferred exception: Cannot read property 'length' of undefined TypeError: Cannot read property 'length' of undefined
    at o._isFloated (http://localhost:3000/assets/js/vendor.js?id=b162ccd411517d2264b1:3701:922)
    at o._init (http://localhost:3000/assets/js/vendor.js?id=b162ccd411517d2264b1:3701:498)
    at new o (http://localhost:3000/assets/js/vendor.js?id=b162ccd411517d2264b1:3701:426)
    at HTMLDivElement.<anonymous> (http://localhost:3000/assets/js/vendor.js?id=b162ccd411517d2264b1:3701:1407)
    at Function.each (http://localhost:3000/assets/js/vendor.js?id=b162ccd411517d2264b1:5203:19)
    at jQuery.fn.init.each (http://localhost:3000/assets/js/vendor.js?id=b162ccd411517d2264b1:5038:17)
    at jQuery.fn.init.e.fn.<computed> [as floatingFormLabels] (http://localhost:3000/assets/js/vendor.js?id=b162ccd411517d2264b1:3701:1309)
    at HTMLDocument.<anonymous> (http://localhost:3000/assets/js/main.js?id=093271e6e5c564f9fa41:592:21)
    at mightThrow (http://localhost:3000/assets/js/vendor.js?id=b162ccd411517d2264b1:8393:29)
    at process (http://localhost:3000/assets/js/vendor.js?id=b162ccd411517d2264b1:8461:12) undefined
jQuery.Deferred.exceptionHook @ floatingFormLabels.min.js:formatted:1
process @ floatingFormLabels.min.js:formatted:1
setTimeout (async)
(anonymous) @ floatingFormLabels.min.js:formatted:1
fire @ floatingFormLabels.min.js:formatted:1
fireWith @ floatingFormLabels.min.js:formatted:1
fire @ floatingFormLabels.min.js:formatted:1
fire @ floatingFormLabels.min.js:formatted:1
fireWith @ floatingFormLabels.min.js:formatted:1
ready @ floatingFormLabels.min.js:formatted:1
completed @ floatingFormLabels.min.js:formatted:1
floatingFormLabels.min.js:formatted:1 Uncaught TypeError: Cannot read property 'length' of undefined
    at o._isFloated (floatingFormLabels.min.js:formatted:1)
    at o._init (floatingFormLabels.min.js:formatted:1)
    at new o (floatingFormLabels.min.js:formatted:1)
    at HTMLDivElement.<anonymous> (floatingFormLabels.min.js:formatted:1)
    at Function.each (floatingFormLabels.min.js:formatted:1)
    at jQuery.fn.init.each (floatingFormLabels.min.js:formatted:1)
    at jQuery.fn.init.e.fn.<computed> [as floatingFormLabels] (floatingFormLabels.min.js:formatted:1)
    at HTMLDocument.<anonymous> (main.js:576)
    at mightThrow (floatingFormLabels.min.js:formatted:1)
    at process (floatingFormLabels.min.js:formatted:1)

[apriljunge]

Can you remove the ffl-wrapper class from the submit buttons? They are not made to float with this plugin.

It should work then

[proimage]

You nailed it! That fixed things. Thank you ever so much!