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>Total Points:
<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 = parseInt(thisNumber[1]);

    myObject[n] = r;

    var totalpoints = 0;

    for (var l = 0; l < n + 1; l++) {
        if (myObject[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));

});