Динамическое отображение изображений на карте с использованием шаблона html с неправильным отображением изображений

Question

Я пытаюсь отобразить некоторую информацию на своей веб-странице, используя данные json, которые я получаю с сервера, но изображения не отображаются правильно на соответствующих карточках.

Это класс, который конвертируется в Json и отправляется в браузер.

public class AgendaViewModel
{
    public string Date { get; set; }
    public string Time { get; set; }
    public string Title { get; set; }

    public List<string> _standardSpeakers;
    public List<string> StandardSpeakers { get { return _standardSpeakers ?? (_standardSpeakers = new List<string>()); } set { _standardSpeakers = value; } }

}

В основном я создал образец карты, как показано на снимке экрана ниже, а затем создал шаблон этой карты, чтобы динамически я мог повторить / отобразить эту карту для всех пунктов повестки дня, которые возвращаются с сервера. Вот код HTML, включая шаблон для карты.

<section>
<div class="container">
    <div class="row">

        <div class='row card-list'>
            @*Agenda will be added here dynamically using AJAX call.*@
        </div>

        <template id="keynote-speaker-card">
            <li><a href=""><img class="speakerImg1" /></a></li>
        </template>

        <template id="agenda-card">
            <div class="col-lg-12 col-12">
                <div class="main card">
                    <div class="card-header-1 pt-20">
                        <div class="row">
                            <div class="col-lg-12">
                                <h6 class="sessionDate"></h6>

                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row" style="border-bottom: 1px solid #ecebeb;">
                            <div class="col-lg-2 col-12">
                                <div class="row ">
                                    <div class="col-12 col-lg-12">
                                        <h6 class="sessionTime"></h6>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-10 col-12">
                                <div class="row">
                                    <div class="col-lg-12 col-12">
                                        <h4 class="sessionTitle "></h4>
                                    </div>
                                    <div class="col-lg-12 col-12 mt-10">
                                        <h5 class="mb-20">Speakers</h5>
                                        <h6 class="keynoteHeading" style="display:none">Keynote:</h6>
                                        <ul class="custom-ul-image">
                                            <div id="img0" class="keynote-speakers-list">
                                            </div>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>

    </div>
</div>

, а вот вызов Ajax, который отправляется на сервер для получения данных в * Формат 1026 *.

$('#btnSearch').click(function (e) {

        e.preventDefault();
        $('.card-list').html("");
        var data = $('#searchForm').serializeArray();
        $.ajax({
            type: "POST",
            url: '@Url.Action("GetAgenda", "Agenda")',
            data: data,
            success: function (response) {
                response.search.Results.forEach(function (ele) {
                    var card = $($('#agenda-card').html());
                    card.find('.sessionDate').text(ele.Date);
                    card.find('.sessionTime').text(ele.Time);
                    card.find('.sessionTitle').text(ele.Title);
                    ele.StandardSpeakers.forEach(function (speaker) {
                        var keynoteSpeakerCard = $($('#keynote-speaker-card').html());
                        keynoteSpeakerCard.find('.speakerImg1').attr('src', speaker);
                        $('#img0.keynote-speakers-list').append(keynoteSpeakerCard);
                    });
                    $('.card-list').append(card);
                });
            },
        });
    });

Сервер возвращает данные в правильном формате и порядке, но когда я отображаю эти данные, используя приведенный выше код успеха Ajax, изображения Keynote Speaker неправильно отражаются на правильные карты, т.е. большинство карт показывают одно и то же изображение. Я думаю, что это как-то связано с классом, который рендерит изображения даже для карт, которым изображение не принадлежит.

вот пример карты, которая должна отображать изображения для соответствующей сессии (фактическое изображение скрыто на картинке намеренно)