JSFiddle - React, Tailwind, and code Playground

HTML

<input class="played" type="text" value="" /><br>
<input class="played" type="text" value="" /><br>
<input class="played" type="text" value="" /><br>
<input class="played" type="text" value="" /><br>
<input class="played" type="text" value="" /><br>
<input class="played" type="text" value="" /><br>
<input class="played" type="text" value="" /><br>
<input class="played" type="text" value="" /><br>
<input class="played" type="text" value="" /><br>
<input class="played" type="text" value="" /><br>
<input class="played" type="text" value="" /><br>
<input class="played" type="text" value="" />

JavaScript

var timer;
$('.played').on({
    'focus': function () {
        $(this).val(function (i, v) {
            return (+v || 0) + 1;
        }).blur();
    },
    'mousedown': function () {
        var $el = $(this);
        timer = setTimeout(function () {
            $el.val('');
        }, 5000);
    },
    'mouseup': function () {
        clearTimeout(timer);
    }
});