JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <button id="tb0">TB0</button>
    <button id="tb1">TB1</button>
    <button id="tb2">TB2</button>
    <button id="tb3">TB3</button>
    <button id="tb4">TB4</button>
    <button id="tb5">TB5</button>
    <button id="tb6">TB6</button>
    <button id="tb7">TB7</button>
    <button id="tb8">TB8</button>
    <button id="tb9">TB9</button>
</div>
<textarea id="ta"></textarea>

CSS

textarea
{
    width: 400px;
    height: 300px;
}

JavaScript

(function(){
    var iTotalScore = 0,
        eTA = null, 
        eTotal = null;
      
    

    $(function() {
        eTA = $("#ta").after( "<p>+</p><p>-----</p><p id='total'>0</p>")[0];            
        
        
        eTotal = $("#total")[0];
        
        for ( var i = 0; i < 10; i ++)
        {
            listenToButton(i);
        }
        // HINT:
        // alert(i);
    });
    
    function updateScore(iAmount) {
        iTotalScore += iAmount;
        eTotal.innerHTML = iTotalScore;
        alert(iTotalScore);
    }
        
        
    function listenToButton(i)
    {
        $("#tb" + i).on("click", function() 
        {
            eTA.innerHTML += i + "\n";
            updateScore(i);
                    
        });
    }
})();