displaying modal in django table

[Joshua Valdez]

Okay so I have a dynamically constructed Django table that takes a ordered dict passed to it from the context.

What I want to do is truncate the data in each field and provide a modal to display the remainder of the information in a modal table.

The issue I'm running into is that the same data is being displayed in each modal and I am not sure why. Below is my template and javascript code as well as the structure of the data I am working with. Any help is appreciated. Thanks.

{% if data %}
              <section class="results-section">
                <div class="container-fluid">
                  <div class="row">
                    <div class="col-md-12">
                      <div id='loader' class="center-block">
                        <p>Searching<img src='{% static "img/ellipsis.svg" %}'></p>
                        <img class="center-block" src='{% static "img/gears.svg" %}'>
                      </div>
                      <table class="table table-bordered table-striped table-hover table-responsive" id="results-table" >
                        <thead>
                          <tr>
                            <th style="width: 4%">#</th>
                            <th>Study Reference</th>
                            <th>Study Methods</th>
                            <th>Study Data</th>
                            <th>Study Tools</th>
                          <tr>
                        </thead>
                        <tbody>
                        {% if data %}
                        {% for key, value in data %}
                          <tr>
                            <td scope="row">{{ forloop.counter }}.</td>
                            <td>

                                <div id="popup">
                                  <p class="citation" data-hover="{{ value.2 }}">{{ value.1 }}
                                  <img src='{% static "img/expand-icon2.png" %}' id="expand"></p>
                                  <a class="article" target="_blank" href={{ value.3 }}>{{ value.2 }}</a>
                                </div> 

                            </td>
                            {% if value.4 %}
                            <td>{{ value.4 }}<a class='test' href='#' id="trigger_{{ forloop.counter }}"><img src='{% static "img/expand-icon2.png" %}' id="expand"></a></td>
                            {% else %}
                            <td>No Provenance Terms Found</td>
                            {% endif %}
                            {% if value.5 %}
                            <td>{{ value.5 }}<a href='#' id="trigger_{{ forloop.counter }}"><img src='{% static "img/expand-icon2.png" %}' id="expand"></a></td>
                            {% else %}
                            <td>No Provenance Terms Found</td>
                            {% endif %}
                            {% if value.6 %}
                            <td>{{ value.6 }}<a href='#' id="trigger_{{ forloop.counter }}"><img src='{% static "img/expand-icon2.png" %}' id="expand"></a></td>
                            {% else %}
                            <td>No Provenance Terms Found</td>
                            {% endif %}
                          </tr>  
                        {% endfor %}
                        {% endif %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div> <!-- close container-->


              </section>
              {% endif %}

              {% if methods %}
              {% for key, value in methods %}
              <div id="classModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="classInfo" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        ×
                      </button>
                      <h4 class="modal-title" id="classModalLabel">
                            Triples:
                          </h4>
                    </div>
                    <div class="modal-body">
                      <table id="classTable" class="table table-bordered">
                        <thead>
                          <tr>
                            <th style="width: 4%">#</th>
                            <th>Subject</th>
                            <th>Predicate</th>
                            <th>Object</th>
                          <tr>
                        </thead>
                        <tbody>
                            {% for item in value %}
                              <tr>
                                <td scope="row">{{ forloop.counter }}.</td>
                                <td>{{ item }}</td>
                                <td>{{ item }}</td>
                                <td>{{ item }}</td>
                              </tr>
                            {% endfor %}
                        </tbody>
                      </table>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-primary" data-dismiss="modal">
                        Close
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              {% endfor %}
              {% endif %}

<script type="text/javascript">
    //$('#classModal').modal('show')

    $('.test').each(function(){
      var trig = '[id^="trigger_"]';
      $(trig).click(function(){
        $('#classModal').modal('show');
        return false;
      })

    });
  </script>

My two data structures look like:
Methods data: {1: [' The majority of the research in this field hasHasFocussedOn Group interventions'], ... 2: ['Connectivity patterns in controls seed connectivity patterns of those rois in control subjects provide Reference information for comparisons'...]}
data: orderedDict([(12, [0, 'test', 'Real-life assessment of the validity of patient global impression of change in fibromyalgia', 'test', 'Baseline disease severity and follow-up duration wereIdentifiedAs Significant independent predictors of pgic rating', 'Outcome measures data shouldNotBeConsideredIn Isolation but within the global clinical context', None]), (3, [0, 'test', 'Mental health professionals attitudes toward patients with PTSD and depression', 'test', 'Our findings mayRepresent A valid estimation of the prevailing attitudes of mental health professionals', 'The participating health professionals attributed Responsibility, ...])
any help is appreciated. Thanks.