how to get the value of dynamic headings with jquery

I am trying to get the value of a dynamic heading.

If I run this code, it shows the list of that ten headings, but my need is, if I click a heading, it should show the value of that particular headings $i value. but it only returning the empty value in the alert.
how can I solve this problem?

<html>
<head>
  <title>
    sample
  </title>
  <script src="jquery.js"></script>
  <script>
    $(document).ready(function() {
      $('.myclass').click(function() {
        alert($(this).val());
      });
    });
  </script>
</head>

<body>
<?php
  for($i = 0; $i < 10; $i++) {
    echo '<h1 class="myclass" value = "'.$i.'"> find my number</h1>';
  }
?>
</body>
</html>`