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 >

            <div >
                <div >
                    {% for homes in home %}
                    <div >
                        <div >
                            <div >
                                <img src="{{ homes.coverImg.url }}" alt="Cover Image">
                                <span><h4>{{ homes.pricePerMonth }}Taka</h4></span>
                            </div>
                            <div >
                                <p > <i ></i>{{homes.address}}</p>
                                <h3>{{ homes.title}}</h3>
                                {% if request.user.is_authenticated %}
                                <a href="{% url 'HomeDetails' homes.id %}" >Details</a>
                                {% else %}                                                         
                                <button type="button"  id="toastbtn">XDetails</button>
                              
                                                         
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>

        </section>

        <!-- Alert Message Popup-->
          <!--bottom-0 end-0 p-3-->
          <div  style="z-index: 11">
            <div id="liveToast"  role="alert" aria-live="assertive" aria-atomic="true">
              <div >
                <img src="({% static 'img/icon.png' %})"  alt="...">
                <strong >My Second Home</strong>
                <small>0.1s ago</small>
                <button type="button"  data-bs-dismiss="toast" aria-label="Close"></button>
              </div>
              <div >
                Hello!<br>You need to login first to see details.
                <div >                 
                  <a  href="{% url 'login' %}">Sign In</a>
                  <button type="button"  data-bs-dismiss="toast">Close</button>
                </div>
            </div>
          </div>

CodePudding user response：

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"  onclick="showToast()">XDetails</button>