Bootstrap toast messages showing for the first card in loop element in a Django project

I want to toast messages for all those cards. but it is showing for the first card only. I have attached a view of my page where I want to add a toast message to view the details of the card if a user is not logged in.

Here is a view of my page.

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

<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" id="toastbtn">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>

Answer

This solution is collected from Gahan Vig!!

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())
}

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

Advertisement

Answer