<link href="css/cincopinpad.css" rel="stylesheet">
<script src="js/jquery.cincopinpad.js"></script>

<!-- initialize keyboard (required) -->
<script>
    $(function(){
        $('#cincopinpad')
        .cincopinpad({
            pinPadLayout : 'cincoCustom',
            type:'changePin',
            isMaxLength:true,
            maxLength:2,
                my_change : function(){
            }
        })
    });
</script>

<div id="cincopinpad"></div>

// create cinco pin input fields
function createCincoPinInput(el, options){
    var _type = options.type;
    var _i = (_type === 'changePin' ? 12 : _type === 'createPin' ? 8 : 4);
    for(i = 1; i <= _i; i++) {
        el.append(
            $('<input/>', {
                text: i,
                id: 'pin_' + i,
                class : options.css.pinInput,
                focus: function () { highLightContents(this); },
                keypress: function() { keyPressed(this) }
            })
        ).append((i % 4 === 0) ? '<br/>' : '');
    }
};