how to load modal form dynamically - html

Question

i have a template that shows list of items in a cart and each items can be edited again eg. quantity etc.
The issue am having is that if i intend editing the second or third items, the bootstrap modal form that loads, displays the first item in the list,
Here is my template:
{% 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">×</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>
<!-- Continue -->
<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 %}
how can i make it load other items on the list also