JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <div class="column">
        <div class="form-group">
            <input id="phone" type="text" class="form-control" placeholder="Ваш телефон" 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" onclick="del()" data-paste="→" value="→"/>





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

JavaScript

jQuery.fn.extend({
insertAtCaret: function(myValue){
  return this.each(function(i) {
    if (document.selection) {
      //For browsers like Internet Explorer
      this.focus();
      var sel = document.selection.createRange();
      sel.text = myValue;
      this.focus();
    }
    else if (this.selectionStart || this.selectionStart == '0') {
      //For browsers like Firefox and Webkit based
      var startPos = this.selectionStart;
      var endPos = this.selectionEnd;
      var scrollTop = this.scrollTop;
      this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
      this.focus();
      this.selectionStart = startPos + myValue.length;
      this.selectionEnd = startPos + myValue.length;
      this.scrollTop = scrollTop;
    } else {
      this.value += myValue;
      this.focus();
    }
  });
}
});

 function del(){
	var str = document.getElementById('phone').value;
	document.getElementById('phone').value = str.substring(0, str.length-1);
}



$(document).ready(function() {
    var codes = {
        '063': 'Life',
        '065': 'MTS',
        '039': 'Golden Telecom',
        '050': 'MTS',
        '066': 'MTS',
        '067': 'Киевстар',
        '068': 'Beeline',
        '091': 'Укртелеком',
        '092': 'PEOPLEnet',
        '094': 'Интертелеком',
        '095': 'МТС',
        '096': 'Киевстар',
        '097': 'Киевстар',
        '098': 'Киевстар',
        '044': 'Gorodskoy_Kiev'
    };

    var retite = new Date();
    var mask = $('#phone').attr('data-mask');
    //$("#phone").mask(mask, {placeholder: "_", autoclear: false});
 
    $("#phone").keyup(function() {
        checkValid();
    });
    
    $(".mybutton").on('click', function() {        
        if ($(this).attr('onclick') !== undefined) {
            return;
        }
        var Paste = $(this).data('paste');
        $("#phone").insertAtCaret(Paste);
        checkValid();
    });
    
    function checkValid() {
        var val =...