如何动态加载模态表单

Question

我有一个模板，显示购物车中的商品列表，每个商品都可以再次编辑，例如。数量等。

我遇到的问题是，如果我打算编辑第二个或第三个项目，加载的bootstrap模态表单，显示列表中的第一个项目，

这是我的模板：

{% if show_delete_btn = True %}
<tr>                                                    
   <td>{{ order_item.signer }}</td>
    <td>{{ order_item.quantity }}</td>
    <td>{{ order_item.item_value }}</td>
    <td>{{ order_item.auth_fee }}</td>
    <!-- <td>{{ order_item.id }}</td> -->



    <td>

        <div class="hlinks">
            <a href="#" data-toggle="modal" data-target="#myModal" class="add_cert_no"  title="Edit this item">
                <i class="fa fa-pencil-square-o"></i>
            </a>
            <a href="{% url 'client:delete_item' order_item.id %}" onclick="return confirm('Are you sure you want to delete this item?')";>
                <i class="fa fa-trash-o"></i>
            </a>
        </div>
        <!--<p>{{order_item.id}}</p>-->

        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog" id="{{order_item.id}}" attr="{{order_item.id}}">
            <div class="modal-dialog">

            <!-- Modal content-->
                <div class="modal-content" align="left">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Edit or Update Item </h4>
                    </div>
                    <div class="modal-body">

                        <div class="alert hidden" id="alert1" role="alert">
                    </div>
                    <p id="item_make"></p>
                    <!--form action="{% url 'jsa_admin:duplicate_remove_item' %}" method="POST" class="special"-->
                   <!-- <form id="{{order_item.id}}"> -->
                    <form action="{% url 'client:edit_orderItem' %}" method="post" class="special" name="myForm" enctype="multipart/form-data" id="{{order_item.id}}">
                      {% csrf_token %}                        

                              <div class="col-md-12">
                                  <label>Signer Name or Theme</label>
                                  <input type="text" id="id_signer" maxlength="30" name="signer" value="{{ order_item.signer }}" placeholder = "" required/>                    
                              </div>

                              <div class="col-md-12">
                                <input type="hidden" id="id_item_id" maxlength="30" name="item_id"  value="{{order_item.id}}" placeholder="" required/>                    
                              </div>

                              <div class="col-md-12">
                                <label>Quantity</label>
                                  <input id="id_quantity" maxlength="30" name="item_quantity"  type="number"  value="{{ order_item.quantity }}" required/>
                              </div>

                              <div class="col-md-12">
                                <label>Declared Value($)</label>
                                  <input type="number" id="id_item_value" maxlength="30" name="item_value"  type="text"   value="{{ order_item.item_value }}" required/>
                              </div>

                            <div class="col-md-12">
                              <input id="id_packing_list" maxlength="30" name="packing_list"  type="hidden"  placeholder="Packing List" value= "n/a" />
                            </div>

                              <div class="col-md-12">
                              </div>                              

                          <!-- <a href=" url 'jsa_admin:duplicate_remove_item' " class='btn btn-primary pull-right' style="background-color: blue !important;">Continue</a> -->
                            <div class="modal-body">
                              <input type="submit" name="edit" id="edit_item" class='btn pull-right' value="Edit"/>
                            </div>

                    </form><br>

                  </div>

                    </div>
                </div>

            </div>
        </div>
    </td>  
</tr>
{% endif %}

如何让它加载列表中的其他项目