单击的图像ID与API记录ID匹配时如何更新记录显示

Question

在addeventlistener部分下，我将//用于无效代码。警报是测试单击是否在每个图像上起作用，以及它是否运作良好。图片的ID与API中的ID值匹配。当点击的图片ID与我的API记录ID相匹配时，如何使记录显示为与之匹配的ID？

我的网站在左边，我有16张图片，在右边，我的api记录从第一个记录开始逐一显示，然后有一个NEXT按钮可以查看第二个记录，直到第16个记录。

以HTML显示记录：

<section id="records" style="height:260px;"></section>

在JS中：

var index=0;
var animals = [];
function iterateRecords(data,index,start) {
    console.log(data.result.records[index]._id);
    var record = data.result.records[index];
    var recordId = record._id
    var recordEnglish = record.English
    var recordYugambeh = record.Yugambeh

    if(start==0){
        $("#record-btn-prev").hide();
        $("#records").append(
            $('<div class="record">').append(
                $('<h2 id="record_id" style="color:white">').text("No."+" "+recordId),
                $('<p id="record_English" style="color:white;font-size:1.5em">').text("English:"+" "+recordEnglish),
                $('<p id="record_Yugambeh" style="color:white;font-size:1.5em">').text("Yugambeh:"+" "+recordYugambeh),

                )
        );
    }else{
        $('#record_id').text("No."+" "+recordId),
        $('#record_English').text("English:"+" "+recordEnglish),
        $('#record_Yugambeh').text("Yugambeh:"+" "+recordYugambeh)
    };
    $('#record_id').attr("value",recordId);
    $('#record_English').attr("value",recordEnglish);
    $('#record_Yugambeh').attr("value",recordYugambeh);
    $('#id').each(function(indexes,element){});

    var a = document.getElementById("animalsvg");
    a.addEventListener("load",function(){
        var svgDoc = a.contentDocument;
        var delta = svgDoc.getElementsByClassName("animalimg");
        console.log("images:", delta.length)
        for (var i = 0; i < delta.length; i++) {
          delta[i].addEventListener('click', function() {
              alert(this.id)
            //if ((this.id)==recordId){
                //$( ".record" ).show()
            //}
          });

      }})

}