Javascript 如何确保每个动态创建的图像都使用从API提取的自己的信息/数据？

我是否有办法确保创建的每个img标记也包含或可以与api中的单个数据链接？如果在搜索中只返回一个图像，它将为我提供该图像的数据。但是，如果返回多个图像，一旦单击，它将只返回一个可能的图像和数据。一般来说，我对编码和javascript都是新手，所以请原谅任何新手的错误。谢谢

var scryfallURL = "https://api.scryfall.com/cards/search?q=";
var cardName = "";
var container = $("#list");

$("#searchBtn").on("click", function(event) {
  event.preventDefault();
  container.empty();
  cardName = $("#search").val().trim();

  queryURL = scryfallURL + cardName;


  $.ajax({
    url: queryURL,
    method: "GET"
  }).then(function(response) {

    debugger;
    var result = response.data;
    console.log(result);
    $('#search').val('');




    //loops through creating an image tag for each search result
    for (let index = 0; index < result.length; index++) {

      var showCard = $("#list").append("<image src=' " + result[index].image_uris["normal"] + "' ></image>", "</br>");

      var name = result[index].name + "<br>";
      var creature = result[index].type_line + "<br>";
      var flavorText = result[index].flavor_text + "<br>";
      var legality = result[index].legalities + "<br>";
      var cardFront = "<image src=' " + result[index].image_uris["large"] + "' ></image>" + "<br>";

    };

    // click function to clear the div and replace with only one card image and info
    showCard.click(function() {
      $("#searchForm").empty();
      container.empty();
      $("#info").append(name, creature, flavorText, legality);
      $("#oneCard").append(cardFront);
    })

  });

});

var scryfallURL=”https://api.scryfall.com/cards/search?q=";
var cardName=“”；
var容器=$（“#列表”）；
$（#searchBtn”）。在（“单击”上，函数（事件）{
event.preventDefault（）；
container.empty（）；
cardName=$（“#搜索”）.val（）.trim（）；
queryURL=scryfallURL+cardName；
$.ajax({
url:queryURL，
方法：“获取”
}).然后（功能（响应）{
调试器；
var结果=响应数据；
控制台日志（结果）；
$（'#search'）.val（''）；
//循环创建每个搜索结果的图像标记
for（让index=0；index”；
变量名称=结果[索引]。名称+“
”；
变量=结果[索引]。键入线+“
”；
var-flavorText=结果[索引]。flavor_text+“
”；
var合法性=结果[索引]。合法性+“
”；
var cardFront=“”+”
“；
};
//单击“功能”以清除div并仅替换为一张卡的图像和信息
showCard.click（函数（）{
$（“#searchForm”）.empty（）；
container.empty（）；
$（“#信息”）。附加（名称、生物、香味文本、合法性）；
$（“#一张卡”）。附加（卡片正面）；
})
});
});

result的输出是什么？“result”变量输出与卡有关的所有信息。有相当多的信息，我可以从每个卡的API，但由于这是我的第一个项目之一，我试图保持它的简单。根据用户输入，您可以取回70张不同的卡。我曾经从API中调用过数据，但没有调用图像，然后“单击”将有关该图像的某些信息返回给我