JSFiddle - React, Tailwind, and code Playground
HTML
<input type="button" id="button" value="Click me!" />
<br/>
<input type="button" id="another_button" value="No, try me instead!" />
<br/>
<input type="button" id="yet_another_button" value="I'm even better!" />
<div id="counter">0</div>
JavaScript
$(document).ready(function() {
// The actual counter is contained in the counter closure.
// You can create new independent counters by simply assigning
// the function to a new variable
function makeCounter() {
var count = 0;
return function() {
count++;
return count;
};
}
// This variable contains a counter instance
// The counter is shared among all calls regardless of the caller
var counter = makeCounter();
// The handler is bound to multiple buttons separated by commas
$("#button, #another_button, #yet_another_button").click(function() {
var i = counter();
console.log("The counter now is at " + i);
$("#counter").text(i);
});
});