Why can't I establish two cleave.js formatted fields in the same js file?

SOLVED:

As it turned out it needs the objects to exist in order to run new Cleave. If one of the elements doesn't exist on the page, the whole thing fails for some reason. I ended up going with wrapping each new Cleave, checking if an element with that class existed or not, for example:

if ($('.card-input').length) {
  new Cleave('.card-input', {
    delimiter: '-',
    blocks: [4,4,4,4]
  });
}

UPDATE:

Or even better, if you're like me and need to format more than one object of the same class on a page (which causes cleave to only format the first one with the code above) retrieve the array of objects and run cleave on each. It performs the same 'does it exist' check as well as formatting each object. For example:

for(let field of $('.zip_code').toArray()){
  new Cleave(field, {
    numericOnly: true,
    delimiter: ' ',
    blocks: [5,4]
  });
}

UPDATE AGAIN:

So as it turns out the above is less than ideal because, as I understand it, the above let-of loop (like for-in loops) will iterate across the enumerable objects of an array, instead of just over its indices. Have a look at this answer if you too would like interpret what that's about: For-each over an array in JavaScript?.

As well, I couldn't precompile my assets for production becasue it hated the use of let, and while changing let-of to for-in also worked, I ended up going with the more specific forEach loop.

$('.zip-code').toArray().forEach(function(field){
   new Cleave(field, {
      numericOnly: true,
      delimiter: ' ',
      blocks: [5,4]
   })
});