В проекте Django bootstrap тостовые сообщения отображаются для первой карточки в элементе цикла

Я хочу добавить тостовое сообщение для всех этих карточек. но оно отображается только для первой карточки. Я приложил вид моей страницы, где я хочу добавить тостовое сообщение для просмотра деталей карточки, если пользователь не вошел в систему. Я ноб в Django и Javascript. Это небольшая часть моего университетского проекта.

моя страница выглядит следующим образом: https://i.stack.imgur.com/cYSPW.jpg

Так вот, ваша проблема связана с id toastbtn. Вы выполнили итерацию в цикле for, и все кнопки в карточках получили одинаковый id, но id уникален для всех, поэтому id добавляется только к первой кнопке карточки. Здесь можно поступить следующим образом: удалить id toastbtn из кнопки и атрибута onclick на btn и передать значение вызову функции, как показано ниже -

<button type="button" class="btn btn-primary" onclick="showToast()">XDetails</button>

Функция showToast - это та же функция, которую вы добавили в ваш js файл Ваш JS файл будет выглядеть следующим образом

function showToast() {
  
    var toastElList = [].slice.call(document.querySelectorAll('.toast'))
    var toastList = toastElList.map(function(toastEl) {
      
      return new bootstrap.Toast(toastEl)
    })
    toastList.forEach(toast => toast.show())
}

HTML-файл

<section class="details-card">

            <div class="container">
                <div class="row">
                    {% for homes in home %}
                    <div class="col-md-4 mb-4">
                        <div class="card-content">
                            <div class="card-img">
                                <img src="{{ homes.coverImg.url }}" alt="Cover Image">
                                <span><h4>{{ homes.pricePerMonth }}Taka</h4></span>
                            </div>
                            <div class="card-desc">
                                <p class="small mb-1"> <i class="fas fa-map-marker-alt mr-2"></i>{{homes.address}}</p>
                                <h3>{{ homes.title}}</h3>
                                {% if request.user.is_authenticated %}
                                <a href="{% url 'HomeDetails' homes.id %}" class="btn btn-md btn-primary hover-top">Details</a>
                                {% else %}                                                         
                                <button type="button" class="btn btn-primary" onclick="showToast()">XDetails</button>
                              
                                                         
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>

        </section>

        <!-- Alert Message Popup-->
          <!--bottom-0 end-0 p-3-->
          <div class="position-fixed top-50 start-50 translate-middle p-3" style="z-index: 11">
            <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
              <div class="toast-header">
                <img src="({% static 'img/icon.png' %})" class="rounded me-2" alt="...">
                <strong class="me-auto">My Second Home</strong>
                <small>0.1s ago</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
              </div>
              <div class="toast-body">
                Hello!<br>You need to login first to see details.
                <div class="mt-2 pt-2 border-top">                 
                  <a class="btn btn-primary btn-sm" href="{% url 'login' %}">Sign In</a>
                  <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
                </div>
            </div>
          </div>
Вернуться на верх