Writing With Arrow Functions

No, you didn't do anything wrong.

This is caused by the fact that in addition to having a shorter syntax arrow functions deal with binding of the this keyword differently from how a traditional function does it. You can read about how arrow functions deal with this here. But ultimately it's a somewhat complex topic as the this keyword in general is quite complex. Getting into a deep explanation of it is outside the scope of this post but there are tons of articles written about it if you are curious and want to research a bit for yourself.

Arrow functions deal with this in a way that makes more sense than the default way in quite a few instances, but there are situations like the one you have run into where it actually creates a problem rather than solves it. There are ways around this issue when using jQuery like using the currentTarget property of the event that is passed to the jQuery event listeners instead of using this like this:

// Assign the event that is passed in automatically to e
$('.card').on('click', (e) => {
  // then use the "currentTarget" property since that is essentially what "this" normally refers to
  $(e.currentTarget).toggleClass('selected');
});

But ultimately the simplest solution is to just use the regular function syntax when you use jQuery callbacks that make use of the this keyword.