In Django bootstrap project toast messages showing for the first card in loop element

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. I noob in Django and Javascript. this is a small part of my university project.

my page looks like this: https://i.stack.imgur.com/cYSPW.jpg

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

So here your problem comes from the id toastbtn. You have iterated the for loop and all the buttons in the cards got the same id but id unique for everyone so the id is added to the first card button only. Here one thing can be done remove the toastbtn id from the button and onclick attribute on the btn and pass the value the function call like shown below –

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

The showToast function is the same function u added in you js file Your JS file will look like this

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 File

<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>