Phone Mask does not work before typing

I have a cellphone bootstrap text box. After i click the textbox i can see the mask but i would like to see the mask as soon as i open the modal.

note:self.EStates stop woking after adding mask.

onload

after clicking

ko.extenders.mask = function (observable, mask) {
        observable.mask = mask;
        return observable;
    }


    var orgValueInit = ko.bindingHandlers.value.init;
    ko.bindingHandlers.value.init = function (element, valueAccessor) {
        var mask = valueAccessor().mask;
        if (mask) {
            $(element).mask(mask);
        }

        orgValueInit.apply(this, arguments);
    }

function ViewModel() {
self.cellPhone = ko.observable().extend({
            required: true,
            mask: "(999) 999-9999"
        });

  self.getCellPhoneNumberForAgent = function () {
            var cellPhone = "";
            var responseFromGetCellPhoneNumber = $.getJSON('GetCellPhoneNumberForAgent', function (cellPhoneResponse) {
                cellPhone = cellPhoneResponse;
            }).done(function () {
                var cellPhoneNumberForAgent = $.parseJSON(cellPhone);
                self.cellPhone(cellPhoneNumberForAgent);
            });
        };
        self.getCellPhoneNumberForAgent();


    //This is not working after adding mask code.
    self.EStates = ko.observableArray([]);
        $.getJSON('GetEStates', function (data) {
            var result = $.parseJSON(data);
            $.each(result, function (key, value) {
                var name = value;
                var state = new eligibleState(name, false);
                self.EStates.push(state);
            });
        });
}