Problem with JoubelUI.createButton

Hi there,

In the process of developing new features for the Dialog Cards library I am confronted with the following problem.

<code> C.prototype.createNumberCards = function () {
    var self = this;
    var $numberCards = $('<div>', {
      'class': 'h5p-dialogcards-number',
      'html': "How many cards do you want? "
    });
    var $nbCards = 20;
    for (i = 5; i <$nbCards; i+= 5) {
      switch (i) {
      case 5:
        self.$Button = JoubelUI.createButton({
          'html': i
        }).click(function () {
          alert(i);
        }).appendTo($numberCards);
        break;
      case 10:
        self.$Button = JoubelUI.createButton({
          'html': i
        }).click(function () {
          alert(i);
        }).appendTo($numberCards);
        break;
      };
    };
    return $numberCards;
  };</code>

This is not a fully-working example, but is enough to explain my problem.

The buttons are correctly created. But when I click on either button "5" or button "10" I get a value of "20" when I am expecting to get respective values of 5 and 10. Why is that?