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();
    }
});