JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<button class="direct">Button 1</button>
<button class="direct">Button 2</button>
    <label></label>
</div>

JavaScript

var i = 0;
var directButtons = $("button.direct");

// jquerys each method takes a function callback
directButtons.each(function () {
    i++;
    // since this is inside a funtion
    var buttonID = i; // buttonID will be locally scoped
    
    $(this).click(function (e) {
        // this inner functions "close over" (google "javascript closure") and remembers
        // the value of buttonID in the .each() loop
        $("label").html("Button " + buttonID + " pressed. 'i' will be whatever it ended up after the .each() is finished: " + i);
    });
});