JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="purchases"/>
<div id="amount"></div>
<div id="message"></div>

JavaScript

var purchases = $('#purchases'),
    amount = $('#amount'),
    message = $('#message');

purchases.keydown(function(e) {
    if (!(e.which >= 48 && e.which <= 58) && e.which !== 8 && e.which !== 46 && e.which !== 37 && e.which !== 39) {
        e.preventDefault();
    }
}).keyup(function() {

    var val = purchases.val();
    
    if (!val) {
        amount.text(1);
        return;
    }
    
    val = parseInt(val, 10);
    
    if (val > 10) {
        val = 10;
        $(this).val(10);
        message.text("no more than 10");
        setTimeout(function() {
            message.text("");
        }, 2000);

    }
    
    amount.text(val * 10);
}).val(1);