JSFiddle - React, Tailwind, and code Playground

by mckennatim

HTML

<div>
<div id="buttonDiv"></div><br>
    <p>The IIFE is the click function. It is invoked with the 'i' parameter and which is applied to the function definition and then the function is invoked returning a function that has access to the 'i' variables of the autoButton function as it runs. </p><br>
<span id="log"></span>
</div>

JavaScript

var consol={
  log: function(x){
    $("#log").html($("#log").html()+ x+"<br>")
  }
}
consol.log('my dog is Ulysses')

var buttonDiv =$("#buttonDiv")
var buttons = []
function autoButton(){
  for (var i = 0; i<5; i++){
    buttons.push('<button type="button" id="but'+i+'">button '+ i+' </button>')
  }
  buttonDiv.append(buttons)
  for (var i = 0; i<5; i++){
    var b = $("#but"+i)
    b.click((function(x){
      return function(){
        consol.log('button '+x )
      }
    }(i)))
  }  
}
autoButton()