How can i get the name of each item that has been looped?

How do I get the name of each item from the looped Django model? I am doing a little project and I have hit a wall on this,

<div class="row row-cols-1 row-cols-md-4 g-4 mb-4">

  {% for pizza in pizzas %}

    

  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">**{{pizza.name|title}}**</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer d-flex justify-content-between">
        <a href="{% url 'store:custompizza' pk=pizza.pk %}" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModal">Customize</a>
        
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">{{pizza.name|title}}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
                  <label class="form-check-label" for="defaultCheck1">
                    Default checkbox
                  </label>
              <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-warning">Add to cart</button>
              </div> 
             </div>
          </div>
        </div>

        <small class="fw-bold">${{pizza.price}}</small>

The model:

class pizza(models.Model):
    name = models.CharField(max_length=40, blank=True)
    price = models.DecimalField(decimal_places=2, max_digits=3)

    def get_absolute_url(self):
        return reverse("store:custompizza", kwargs={"pk": self.pk})

The View:

class PizzaList(ListView):
    model = pizza
    context_object_name = 'pizzas'

So what i'm trying to do in this little project is for each item that I looped I want the title of the modal to be dynamic and change according to the item that I click on, but it just doesn't change it adamantly continues to display the name of the first item.

So,After everything has been looped and displayed on the page I click on a button, in this case it's the customize button,on any of the item to activate the modal and at the top of the modal I get the title of the first item that's stored in the database not the one specifically want to show. for example:

if I click on the pineapple card's customize button it shows the title of the first item, Plain. And not pineapple like I want it to. I have attached a picture in case I'm not explaining myself accurately

I tried to use get_absolute_url() with a pk to get the title of each item and it did not work, I kept getting the name of the first item for whatever item I click on. Can someone guide me? I'm new to Django and it seems I hit a wall on this.

The problem is with the way you are using the modal id in your HTML.

In this bit of HTML:

<div class="card-footer d-flex justify-content-between">
    <a href="{% url 'store:custompizza' pk=pizza.pk %}" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModal">Customize</a>
    
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

You need to make the modal ID unique for each iteration through pizzas. You can do this using the forloop counter, or the id of the pizza object (which will be unique). Something like this:

<div class="card-footer d-flex justify-content-between">
    <a href="{% url 'store:custompizza' pk=pizza.pk %}" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exampleModal{{pizza.id}}">Customize</a>
    
    <!-- Modal -->
    <div class="modal fade" id="exampleModal{{pizza.id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">