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 = 0;
var clicked = false;
var element = null;

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

$('.played').off('focus', function () {
    clicked = false;
    clearTimeout();
});

function checkIfClickedFive() {
    if(clicked){
        element.val('');
    }
};