JQuery-step and Stripe - Card Mount

Question

I have a signup/registration page that uses JQuery.steps. On page load the following code is executed.

var elements = stripe.elements();
var card = elements.create('card');
card.mount('#card-element');

So Once the page is loaded and I get to the payment step, I see the element show up on my page with CC field, Expiry, etc.

what I need is once the user gets to the payment step, I need the card info to get sent to my Nodejs server code so that the customer info and payment info is created. My goal is to be able to get the last 4 digits of the credit card so I can show it the user prior to Submitting. In order to do that, I am calling the createToken function which supplies the last 4 digits.

So prior to the last step, (the user has entered the credit card info and has pressed Next (current Index=0, nextIndex 1)) I have the following code:

onStepChanging: function(event, currentIndex, newIndex) {
   if (currentIndex == 0 && newIndex == 1) {
      stripe.createToken(card).then(function(result) { // <-- this is where the error happens
      if (result.error) {
         var errorElement = document.getElementById('card-errors');
         errorElement.textContent = result.error.message;
         return false;
      },
   }
onFinishing: function(event, currentIndex) {
   stripe.createPaymentMethod({
       type: 'card',
       card: card,
   })
   .then((result) => {
       if (result.error) {
          displayError(error);
       } else {
          var fd = new FormData();
          fd.append('customerId', customerId);
          fd.append('paymentMethodId', paymentMethodId);
          ...          

Unfortunately, as soon as stripe.createToken(card) is called I get the following error:

IntegrationError: We could not retrieve data from the specified Element. Please make sure the Element you are attempting to use is still mounted.

I am basically having problem getting the card info sent to my nodejs server.

Any advice?