How to compare ids that are inside of plugin?

I'm looking for solutions to compare the id elements inside of the Plugin. This is the code that has a problem:

(function($, window, undefined) {
  $.fn.thePlugin = function() {
    return this.each(function() {
      const $el = $(this);
      console.log($el);
      if ($el == $('#bird')) {
        console.log($el + ' is a bird.');
        // $el == document.getElementById('bird')
        // $el == document.getElementById('bird').id didn't work.
      } else if ($el == $('#superman')) {
        console.log($el + ' is Superman');
      }
    })
  }
}(jQuery));

$('#bird').thePlugin();
$('#superman').thePlugin();

w.fn.init [div#bird]
w.fn.init [div#superman]

Apparently, the console.logs which are inside of if statement doesn't firing up. Only 1 log fires up that is outside of the if statement.

I've tested 2 ways for solving this problem, using jQuery selectors and without using jQuery selectors but all of the ways didn't work.

Are there any ways to compare the id inside of the plugin structure?

• I cannot use getElementByClassName because my DOM style is always starting with id something like this:

  #section {
    .container {
      .grid {
      }
    }
  }