JSFiddle - React, Tailwind, and code Playground

HTML

<p>These work fine...</p>
<div class="a0">a1 text</div>
<div class="a1">a2 text</div>


<p>But not these...(Why do they have a value of 2????)</p>
<div class="f0">f1 text</div>
<div class="f1">f2 text</div>

JavaScript

$(".a0").on("mouseenter",function(){
        $(this).html("value: 0");
});
$(".a1").on("mouseenter",function(){
        $(this).html("value: 1");
});

/* my failed attempt to consolidate the above code */
for (var i=0; i<2; i++){ 
  (function(j) {
    $(".f"+i).on("mouseenter",function(){
      $(this).html("value: "+ j);
    });
  })(i);
}