Two formats for same input with cleave.js

Question

We have an input inside a modal and this field must have a mask. The mask may be two types defined by what button the user press. As code shown below, please consider expected formats to be 11-11-11 and 111.111.111.

When the modal opens the first applied mask is correct: 11-11-11. But when button btnB is clicked and the field is filled again, the mask changed to 11-.1-1. which is an unexpected result. After that, any button clicked the mask is stuck at 11-.1-1..

What am I missing? What would be the correct approach to this?

$('#btnModalOpen').on('click', function() {
  $('#userModal').modal('show');
  $('#userModal').on('shown.bs.modal', function() {
    $('#btnA').trigger('click');
  })
});

$('#btnA').on('click', function() {
  $('#userInput').val('');
  $('#userInput').trigger('focus');

  $('#userInput').removeClass('formatA');
  $('#userInput').addClass('formatB');

  new Cleave('.formatB', {
    delimiters: ['-', '-'],
    blocks: [2, 2, 2],
  });
});

$('#btnB').on('click', function() {
  $('#userInput').val('');
  $('#userInput').trigger('focus');

  $('#userInput').removeClass('formatB');
  $('#userInput').addClass('formatA');

  new Cleave('.formatA', {
    delimiters: ['.', '.'],
    blocks: [3, 3, 3],
  });
});