Data in Django for loop {% for %} not loading for Modal

Question

I am trying to display information from a django for loop in the HTML. The HTML is as follows:

<div class="row">
            {% for product in page.object_list %}
            <div class="col-lg-3">
                <img class="thumbnail update-wishlist " style="height: auto" src="{{product.finalimagelink}}">
                <div class="box-element product">
                    <h6><strong>{{product.name}}</strong></h6>
                    <hr>

                    <a id="mySizeChart" class="button" style="vertical-align:middle"><span>Prices</span></a>

                    <div id="mySizeChartModal" class="ebcf_modal">

                      <div class="ebcf_modal-content">
                        <span class="ebcf_close">&times;</span>
                        <p>{{product.name}} FROM {{product.store}} £{{product.price}}</p>
                      </div>

                    </div>

                    <button data-product="{{product.id}}" data-action="add" class="btn btn-outline-secondary add-btn update-wishlist" style="width:50px;"><img class="button-image" src="{% static 'images/add.png' %}"></button>
                    <h4 style="display: inline-block; float: right"><strong>£{{product.price}}</strong></h4>

                </div>
            </div>
            {% endfor %}
        </div>

This works for loading the products in a grid but when clicking on <a id="mySizeChart" class="button" style="vertical-align:middle"><span>Prices</span></a> only the data for the first product is displayed. I am not sure why this is. In addtition to this, I have used JavaScript to display the Modal as a popup:

$(".button").click(function() {
  $("#mySizeChartModal").show();
});

$("#mySizeChartModal .ebcf_close").click(function() {
    $("#mySizeChartModal").hide();
});

The CSS is as follows:

/**---------------------*/
/* Popup box BEGIN */
/* The Modal (background) */
.ebcf_modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.ebcf_modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 65%;
}

/* The Close Button */
.ebcf_close {
    color: #aaaaaa;
    float: right;
}

.ebcf_close:hover,
.ebcf_close:focus {
    color: #000;
    cursor: pointer;
}

Any ideas on how I can get the data to load for each product when I click on the Modal pop up?

Answer 1

You have same ids for your modal box that's why only first one works . Instead you can make them unique using id="mySizeChart_{{product.id}}" same for modal-box i.e : id="mySizeChartModal_{{product.id}}" .Then , inside your jquery code simply use $(this).attr("id").split("_")[1] to get id and show only relevant modal.

Demo Code :

$(".button").click(function() {
  var id = $(this).attr("id").split("_")[1]
  $(`#mySizeChartModal_${id}`).show();
});

$(".ebcf_close").click(function() {
  $(".ebcf_modal").hide();
});

.ebcf_modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.ebcf_modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 65%;
}


/* The Close Button */

.ebcf_close {
  color: #aaaaaa;
  float: right;
}

.ebcf_close:hover,
.ebcf_close:focus {
  color: #000;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="row">

  <div class="col-lg-3">
    <img class="thumbnail update-wishlist " style="height: auto" src="{{product.finalimagelink}}">
    <div class="box-element product">
      <h6><strong>Abc</strong></h6>
      <hr>
      <!--add id="mySizeChart_{{product.id}}"-->
      <a id="mySizeChart_1" class="button" style="vertical-align:middle"><span>Prices</span></a>
      <!--add id="mySizeChartModal_{{product.id}}"-->
      <div id="mySizeChartModal_1" class="ebcf_modal">

        <div class="ebcf_modal-content">
          <span class="ebcf_close">&times;</span>
          <p>Abc FROMxyz £23</p>
        </div>

      </div>

      <button data-product="{{product.id}}" data-action="add" class="btn btn-outline-secondary add-btn update-wishlist" style="width:50px;"><img class="button-image" src="{% static 'images/add.png' %}"></button>
      <h4 style="display: inline-block; float: right"><strong>£23</strong></h4>

    </div>
  </div>
  <div class="col-lg-3">
    <img class="thumbnail update-wishlist " style="height: auto" src="{{product.finalimagelink}}">
    <div class="box-element product">
      <h6><strong>Abc2</strong></h6>
      <hr>

      <a id="mySizeChart_2" class="button" style="vertical-align:middle"><span>Prices</span></a>

      <div id="mySizeChartModal_2" class="ebcf_modal">

        <div class="ebcf_modal-content">
          <span class="ebcf_close">&times;</span>
          <p>Abc2 FROMxyz £232</p>
        </div>

      </div>

      <button data-product="{{product.id}}" data-action="add" class="btn btn-outline-secondary add-btn update-wishlist" style="width:50px;"><img class="button-image" src="{% static 'images/add.png' %}"></button>
      <h4 style="display: inline-block; float: right"><strong>£232</strong></h4>

    </div>
  </div>

</div>