JSFiddle - React, Tailwind, and code Playground

HTML

<button id='addPoints1' class="clickme" data-id='0-2'>1</button>
<button id='addPoints2' class="clickme" data-id='1-3'>2</button>
<button id='addPoints3' class="clickme" data-id='2-2'>3</button>
<button id='addPoints4' class="clickme" data-id='3-2'>4</button>
<button id='addPoints5' class="clickme" data-id='4-4'>5</button>
<button id='addPoints6' class="clickme" data-id='5-1'>6</button>
<button id='addPoints7' class="clickme" data-id='6-2'>7</button>
<button id='addPoints8' class="clickme" data-id='7-3'>8</button>
<button id='addPoints9' class="clickme" data-id='8-2'>9</button>
<br><br>
    <div id="tpoints" class="result"></div>
    <div id="theObject" class="result2"></div>

CSS

.result {
    height:25px;
    width:250px;
    display:block;
    border:1px solid #999999;
    margin-top:5px;
}
.result2 {
    height:100px;
    width:500px;
    display:block;
    border:1px solid #999999;
    margin-top:5px;
}

JavaScript

var myObject = {0: 0, 1: 0, 2: 0, 3: 0, 4: 0, 5: 0, 6: 0, 7: 0, 8: 0};

$('.clickme').click(function(){
    
    var thisNumber = $(this).attr("data-id");
    var thisNumber = thisNumber.split('-');
    var n= +thisNumber[0];
    var r= +thisNumber[1];
    
    myObject[n] = r;
    
    var totalpoints = 0;
    
    for(var l = 0; l < n+1; l++) {
        totalpoints += myObject[l];
    }
    
    //alert("Totalpoints: "+totalpoints);
    
    // ADDING POINTS FOR EACH HOLE TO GET THE CURRENT IDEAL POINT //
    var x = n;
    var idealpoints = (x * 2)+2;
    
    // COMPARING IDEAL POINTS WITH HE PLAYERS ACTUAL POINTS //
    var escore = totalpoints-idealpoints;

    $('#tpoints').html(escore);
    $('#theObject').html(JSON.stringify(myObject, null, 4));
    
});