Dynamically setting event listeners

With an array of objects, how does on dynamically add event listeners and behaviors?

by Ron I.

HTML

<div class="wrapper">
 Buttons:
</div>

CSS

.button {
  background-color:#AA7dcA;
  border-radius:4px;
  color:white;
  padding:15px;
  margin:25px;
  display:inline-flex;
  font-size:14pt;
  font-family:sans-serif;
  font-weight:300;
}

.button:hover {
  transition:.5s;
  background-color:#997daa;
  cursor:pointer;
}

JavaScript

class Tool {
 constructor (name, mainFunction) {
  this.name = name;
  this.mainFunction = mainFunction;
 }
 getName() {
   return this.name;
 }
 getMainFunction() {
   return this.mainFunction;
 }
}

var hammer = new Tool('hammer', 'bang on nails');
var saw = new Tool('saw', 'cuts heavy wood');
var toolbox = [hammer, saw];

for (let i in toolbox) {
  $('.wrapper').append('<div class=\"'+toolbox[i].getName()+'  button\">'+toolbox[i].getName()+'</div>');
  $('.wrapper').on('click', '.'+toolbox[i].getName(), function() {
    alert(toolbox[i].getMainFunction());
   });
}