I've come across an example where using => actually solves a real issue

Question

As soon as I've found out about JavaScript => syntax I run through my whole code and replaced every function keyword with =>. I guess it felt, well, cool. But then I figured that it actually isn't. So I replaced every => back to function keyword, and I run across a strange error:

const $ = (id) => document.getElementById(id);

class Car {
  constructor(id, name, color, price) {
    this.id = id;
    this.name = name;
    this.color = color;
    this.price = price;
  }

  body() {
    return(`
      <div id="${this.id}">
        <img src="${this.id}Img.png">
      </div>
    `);
  }

  tooltip() {
    return(`
      <div id="tooltip">
        <p>The ${this.name} we offer is painted ${this.color}, and the price would be ${this.price} USD</p>
      </div>
    `);
  }

  generate() {
    $('root').insertAdjacentHTML('beforeend', this.body());

    // Error occurred here:
    $(this.id + 'Img').onclick = function() {
      $(this.id).insertAdjacentHTML('beforeend', this.tooltip());
    }
    // However, arrow function does the trick:
    $(this.id + 'Img').onclick = () => {
      $(this.id).insertAdjacentHTML('beforeend', this.tooltip());
    }
  }
}

const mercedes = new Car('mercedes', 'Mercedes', 'blue', 15000);
mercedes.generate();

Now, if I call some function that belongs to the global Object (I guess that's how it's called), in this example, onclick, I have to bind Cars this to it as well? .bind(this), or => function. Is this the reason arrow function was invented? Because, this inside onclick function actually refers to that global Object, or something...

Another example would be the first line of code I provided. Should I use arrow functions for returning 1 line of code, or should I wrap it like:

function $(id) {
  return document.getElementById(id);
}

and really use arrow functions when they are absolutely mandatory? I figured if it's just 1 line of code that returns something, and since arrow functions don't need {} and return keyword, it would be OK to use them in that case. For example:

function main() {
  const mercedes = new Car('mercedes', 'Mercedes', 'blue', 15000);
  mercedes.generate();
}

window.onload = () => main();

Another example where I found them to be kind of helpful, is with callbacks. NodeJS code can get pretty messy, so omitting the function keyword can make it cleaner. However, having a function keyword on the other hand can make a lot of nested callbacks less confusing...

// Shorter syntax:
socket.on('listenEvent', (data) => {
  // do something with data
});
// Less confusing, but longer syntax:
socket.on('listenEvent', function(data) {
  // do something with data
});

So, if I wanted my first example to work, i would have to do:

$(this.id + 'Img').onclick = function() {
  $(this.id).insertAdjacentHTML('beforeend', this.tooltip());
}.bind(this);

So, looking at it again, if that is what arrow function translates to, doing something like

const $ = function(id) {
  return document.getElementById(id);
}.bind(this);

Kind of makes no sense... At the very end, I know that this question mostly comes down to personal preference. Is the class example I provided the only place where anyone would absolutely need to use =>, or function with bind? So opinions aside, is my understanding of arrows OK, or am I missing a point?

Thanks!