Django templating for loop working for the first item

Can't really find out what am doing wrongly !! I created a template that has a view and in that view I created a context dictionary which contain filtered orders for a specific user but for some reason in the template I created a loop for order details with a button which allows the user to see more order details but its working only for the first order item

my order model

class Order(models.Model):
    customer = models.ForeignKey(Customer, on_delete=models.CASCADE, null=True, blank=True)
    date_ordered = models.DateTimeField(auto_now_add=True)
    complete = models.BooleanField(default=False)
    transaction_id = models.CharField(max_length=100, null=True)
    total = models.FloatField(max_length=15,null=True, blank=True)
    shipping = models.CharField(max_length=50, blank=True, null=True)
    phone = models.CharField(max_length=15, blank=True, null=True)
    date_ordered = models.DateTimeField(auto_now_add=True)
    delivery = models.CharField(max_length=200, default="3-20 business days", blank=True, null=True)
    def __str__(self):
        return str(self.id)

my view:

@login_required(login_url="login")
 def user_Orders(request):
    user = request.user.customer
    orders = Order.objects.filter(customer=user).filter(complete=True)
    return render(request, 'shop/orders.html', {'orders':orders, "user":user})

my template

<h3 style="color: #0457ae;padding-left: 40px;"><u>YOUR ORDERS</u></h3>
  {% for order in orders %}
      <p>Order total: ${{order.total}}</p>
      <p>Status: Paid</p>
      <p>Transaction id/tracking number :<span id="trans_id">&nbsp;{{order.transaction_id}}</span></p>
      <button id="myBtn" class="btn btn-outline-primary">more details</button>
      <div id="myModal" class="modal">
          <!-- Modal content -->
          <div class="modal-content">
              <span class="close">&times;</span>
              <center><u>More order details</u></center>
              <p>shipping to :{{order.shipping}}</p>
              <p>Estimated delivery: {{order.delivery}}</p>
              <p>phone: {{order.phone}}</p>
          </div>
        </div>
    {% endfor %}
 </div>

the images below shows the output ... I want the popup to happen for each order

Its bad practice that all the buttons have the same id, and also they should have better mames. So, if you change the id from myBtn to detailBtn{{order.id}} and the id for the modal to detailModal{{order.id}}, and edit the javascript you could do that clicking in detailBtnX change the class of detailModalX (change the x for the number)

Every modal needs a unique id, like @Pablo Estevez said.
So make sure you have a unique value in your models.py, (usually an id), that you have given in the context of your view.

With a unique id, you can do something like:

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#{{something.id}}Modal">

To open a modal.

The modal code would look something like this (using bootstrap):

<div class="modal fade" id="{{something.id}}Modal" tabindex="-1" role="dialog" aria-labelledby="detailsModalLabel" aria-hidden="true">
                      <div class="modal-dialog  modal-xl" style="width:100%" role="document">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title" id="detailsModalLabel">Something here</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                            </button>
                          </div>
                          <div class="modal-body">
                            <h6>Body with text</h6>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                          </div>
                        </div>
                      </div>
                    </div>

Hope this helps.

Back to Top