JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <div class="column">
        <div class="form-group">
            <input id="phone" type="text" class="form-control" autofocus autocomplete="off" name="phone"  data-mask="+38 (099) 999-99-99" required/>
            <span id="error" class="error"></span>
        </div>
    </div>
    <div class="column">
        <div class="form-controls">
            <button id="call" type="button" class="btn btn-red btn-large btn-block btn-submit" required disabled="disabled">Заказать звонок</button>
            <input type="button" class="mybutton" data-paste="1" value="1"/>
            <input type="button" class="mybutton" data-paste="2" value="2"/>
            <input type="button" class="mybutton" data-paste="3" value="3"/>
            <input type="button" class="mybutton" data-paste="4" value="4"/>
            <input type="button" class="mybutton" data-paste="5" value="5"/>
            <input type="button" class="mybutton" data-paste="6" value="6"/>
            <input type="button" class="mybutton" data-paste="7" value="7"/>
            <input type="button" class="mybutton" data-paste="8" value="8"/>
            <input type="button" class="mybutton" data-paste="9" value="9"/>
            <input type="button" class="mybutton" data-paste="0" value="0"/>
            <input type="button" class="mybutton" onclick="del()" data-paste="←" value="←"/>





        </div>
    </div>
</form>

JavaScript

!function(factory) {
    "function" == typeof define && define.amd ? define([ "jquery" ], factory) : factory("object" == typeof exports ? require("jquery") : jQuery);
}(function($) {
    var caretTimeoutId, ua = navigator.userAgent, iPhone = /iphone/i.test(ua), chrome = /chrome/i.test(ua), android = /android/i.test(ua);
    $.mask = {
        definitions: {
            "9": "[0-9]",
            a: "[A-Za-z]",
            "*": "[A-Za-z0-9]"
        },
        autoclear: !0,
        dataName: "rawMaskFn",
        placeholder: "_"
    }, $.fn.extend({
        caret: function(begin, end) {
            var range;
            if (0 !== this.length && !this.is(":hidden")) return "number" == typeof begin ? (end = "number" == typeof end ? end : begin, 
            this.each(function() {
                this.setSelectionRange ? this.setSelectionRange(begin, end) : this.createTextRange && (range = this.createTextRange(), 
                range.collapse(!0), range.moveEnd("character", end), range.moveStart("character", begin), 
                range.select());
            })) : (this[0].setSelectionRange ? (begin = this[0].selectionStart, end = this[0].selectionEnd) : document.selection && document.selection.createRange && (range = document.selection.createRange(), 
            begin = 0 - range.duplicate().moveStart("character", -1e5), end = begin + range.text.length), 
            {
                begin: begin,
                end: end
            });
        },
        unmask: function() {
            return this.trigger("unmask");
        },
        mask: function(mask, settings) {
            var input, defs, tests, partialPosition, firstNonMaskPos, lastRequiredNonMaskPos, len, oldVal;
            if (!mask && this.length > 0) {
                input = $(this[0]);
                var fn = input.data($.mask.dataName);
                return fn ? fn() : void 0;
            }
            return settings = $.extend({
                autoclear: $.mask.autoclear,
           ...