JSFiddle - React, Tailwind, and code Playground

HTML

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

<label class="direct">boo</label>
</div>

JavaScript

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

for(var i = 0 ; i < directButtons.length ; i++){
    (function(buttonID){
        // buttonID is now scoped to this funceion
        $(directButtons[buttonID]).click(function (e) {
            $("label.direct").html("Button " + buttonID + " pressed. , 'i' is always " + i);
        });
    })(i); // call the function immedately, supply i's value as parameter
}