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

$('.played').on('focus', function () {
    var $this = $(this);
    
    if ($this.val() == '') {
        $this.val('1');
        $this.blur();
    } else {
        
        
        var value = parseInt($this.val());
        $this.val(value + 1);
        
        $this.val();
        $this.blur();
    }
});

$('.played').mousedown(function(e) {
    console.log($(this));
    var element = $(this);
    clearTimeout(this.downTimer);
    this.downTimer = setTimeout(function() {
        element[0].value="";
        console.log(element);
    }, 5000);
}).mouseup(function(e) {
    clearTimeout(this.downTimer);
});