Как я могу получить индекс изображения, которое я щелкнул в этой функции JavaScript?

Question

Недавно просмотренный список показывает, что при нажатии на одно изображение изображение появляется в списке.
Но пока я не могу получить изображение, которое я хочу, и я просто использую первое изображение, которое появляется в списке, когда я щелкаю изображение, как в коде ${photos[0].file}.
Итак, как я могу получить изображение, которое я щелкнул в недавно просмотренном списке?

function display(photos) {

  let htmlStr = "";
  for (let i = 0; i < photos.length; i++) {
    htmlStr += `<figure data-full="${photos[i].full}" title="${photos[i].title}" file="${photos[i].file}"><img src = "${photos[i].file}"  alt="City view" height="200" width="200"><figcaption>${photos[i].title}</figcaption></figure>`;

  }
  $("#container").html(htmlStr);

  let htStr = "";
  $('figure').each(function(index) {

    $(this).click(function() {
      htStr += `<figure id='recentphoto' data-full="${photos.full}" title="${photos.title}"><img src = "${photos[0].file}" alt="City view" height="140" width="140"><figcaption >${photos[0].title}</figcaption></figure>`;
      $("#recent").html(htStr);

    });

  });

Answer 1

$(document).ready(function() {
  var photos = [
    {
      full: 'full1',
      title: 'title1',
      file: 'file1'
    },
    {
      full: 'full2',
      title: 'title2',
      file: 'file2'
    },
  ];
  
  let htmlStr = "";
  for (let i = 0; i<photos.length; i++) {
      htmlStr += `<figure data-full="${photos[i].full}"
      data-title="${photos[i].title}" data-file="${photos[i].file}" title="${photos[i].title}" file="${photos[i].file}"><img src = "${photos[i].file}"  alt="City view" height="200" width="200"><figcaption>${photos[i].title}</figcaption></figure>`; 
  }

  $("#container").html(htmlStr);
  
  let htStr = "";

   $('figure').click(function(e) {
     var el = $(this).data();
       htStr += `<figure id='recentphoto' data-full="${el['full']}" title="${el['title']}"><img src = "${el['file']}" alt="City view" height="140" width="140"><figcaption >${el['title']}</figcaption></figure>`; 
       $("#recent").html(htStr);
   });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container"></div>
<div id="recent"></div>

Вы можете получить справку по атрибутам данных jQuery.