How to include virtual keyboard(numeric pad) in website?

There is a form filling in my website, and i included virtual keyboard there, when user click in textarea, then virtual keyboard will appear, and in some forms user needs to fill numbers, so i want to include numeric pad in forms where should fill the numbers. I found one, but i cant include it.

I included scripts and css in my tpl file, first 3 of numpad, the rest of keyboard:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.keypad.js"></script>
<link type="text/css" href="jquery.keypad.css" rel="stylesheet">

<script type="text/javascript" src="keyboard.user.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="keyboard.css">




<main class="main" style="padding:0; overflow-x:initial">
    <div class="container">
        {include file="engine/modules/products/eogpo.php"}
    </div>
</main>
<div id="isTerminal"></div>
$(function () {
  $('#defaultKeypad').keypad();
});
<div id="modalError" class="modal info__modal" data-modal>
    <button data-izimodal-close="" class="modal__close">
        <svg class="icon icon-close"><use xlink:href="/images/sprite.svg#icon-close"></use></svg>
    </button>
    <div class="modalStyle">
        <h3 class="info__title" id="errorTitle"><?php echo _("Ошибка"); ?></h3>
        <div id="textError"></div>
    </div>
</div>

<div id="modalInfo" class="modal info__modal" data-modal>
    <button data-izimodal-close="" class="modal__close">
        <svg class="icon icon-close"><use xlink:href="/images/sprite.svg#icon-close"></use></svg>
    </button>
    <div class="modalStyle">
        <div id="textInfo"></div>
    </div>
</div>

<div id="overLoader" style="display: none"><img src="/templates/assets/images/loading.gif" alt="Loading..." /></div>

In tutorial written that I should write:

$(function () {
  $('#defaultKeypad').keypad();
});

to call the plugin with default options, so i wrote it in tpl file

so finally i include the numpad id in:

<fieldset class="field-set col col--4-12" style="false">
                    <label for="orderIIN" class="field-set__label checkList">
                        <?php echo _("IIN");?>
                    </label>
                    <input class=" field iin-masked datas" id="IIN0 defaultKeypad" type="text" name="IIN[]"  maxlength="12" />
                    <span class="small col" id="textKBM0"></span>
                    <span class="small col" id="loadingIIN0"></span>
                    <input class="datas" id="KBM0" type="hidden" name="KBM[]" value="" />
                    <input class="datas" id="clientID0" type="hidden" name="clientID[]" value="" />
                    <input class="datas" id="clientISN0" type="hidden" name="clientISN[]" value="" />
                    <input class="datas" id="clientNation0" type="hidden" name="clientNation[]" value="Kazakhstan" />

                </fieldset> 

Keyboard js works fine, but numpad js still doesn't turn on, where am i doing wrong?

from How to include virtual keyboard(numeric pad) in website?