<div class="subjects">
  <div class="bg-red">
    <i class="lni lni-rocket"></i>
    <h6 class="font-weight-bold">Physics</h6>
  </div>
</div>

Say I have the above html, and I would like to get the text content of h6 every time I click the outermost div. Here's what I did:

$('.subjects').on('click', (e) => {
    const h6 = $(this).find('h6');
    console.log(h6.text());
});

But this does not print Physics, which was inside h6. It print's an empty string. How do I access the text of h6 when I click the outermost div?