Récupérer l'ID de l'élément cliqué

Bonjour à tous,
quelque soit l'image sur laquelle le clique, j'obtiens tjs 111. J'aimerai récupérer mon data-id.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="fr">
  <head> </head>
  <body>
    <img src="/images/maps.webp " class="maps" data-id="111" />
    <img src="/images/maps.webp " class="maps" data-id="222" />
    <img src="/images/maps.webp " class="maps" data-id="333" />
 
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script>
      jQuery(document).ready(function ($) {
        $(".maps").on("click", function () {
          var recup = $(".maps").data("id");
          console.log(recup);
        });
      });
    </script>
  </body>
</html>