Issue with Input Mask

I am working with the input mask component, and I have an issue I can't fix. I have added a form input field using the input mask component like so:

                               <div class="col">
                                   <div class="form-group">
                                       <label class="form-label" for="tbTaxNo">EIN/SSN No.</label>
                                       <input type="text" id="tbTaxNo" data-mdb-input-mask-init data-mdb-input-mask="99-9999999" data-mdb-mask-placeholder="true" name="tbTaxNo" class="form-control" required />
                                   </div>
                               </div>

I am using an AJAX call to load a record an populate the form, and here is how I am loading the input control above:

$("#tbTaxNo").val(data.TaxIDNo);

There are a couple problems. First, the control doesn't apply the input mask to the data I load into the control. Second, if I click into the field, the existing value disappears and shows the input mask, then the field goes blank when I leave it.

How can I fix these issues?