Как сохранить данные в таблице строк HTML при добавлении строки?

Question

На прилагаемом рисунке я хотел бы найти ссылку на названия продуктов по найденному запросу и постепенно добавить соответствующую строку данных в таблицу. Однако, когда я хочу добавить еще одну строку, первая исчезнет. Как сохранить данные в таблице HTML при добавлении другой?

 {% extends 'modules/base.html' %}
    {% load static %}
    {% load mathfilters %}

    {% block content %}

    {% csrf_token %}
    <br>
    <h2>Récapitulatif de la commande</h2>




    <form type="post" action="" style="margin: 0" >
            <br>
            <br>
            <input  id="search_box" type="text" name="search_box"  placeholder="Entez le code du produit ..." align="center">
            <label class="col-lg-2">
                <button id="search_submit" type="submit" > Ajouter une ligne </button>
            </label>
        </form><br>

        <div style="color: blue" class="table-responsive text-nowrap">

            <table class="table" id="productTable" align="center">
                <thead>
                    <tr>
                        <th scope="col"> # </th>
                        <th scope="col"> Réference </th>
                        <th scope="col"> Nom du produit </th>
                        <th scope="col"> Quantité </th>
                        <th scope="col"> Prix unitaire </th>
                        <th scope="col"> Prix total des articles </th>
                    </tr>
                </thead>
                <tbody>

                    <!-- {% if Product %} -->

                        {% for k in Product %}
                            <tr>
                                <th scope="row">{{ forloop.counter }}</th>
                                <td>{{ k.code }}</td>
                                <td>{{ k.name }}</td>

                                <td>
                                    <a href="#"><i class="fas fa-minus mr-2"></i></a>
                                    <!-- {{ k.quantity_entry }} -->
                                    {{1}}
                                    <a href="#"><i class="fas fa-plus ml-2"></i></a>
                                </td>

                                <td>{{ k.unit_price }}</td>
                                <td>{{ k.unit_price|mul:k.quantity_entry}}</td>
                                <!-- *{{ k.quantity_entry }} -->
                                <td>
                                    <a style='color: red;' href="#">
                                        <i class="fas fa-trash float-right"></i>
                                    </a>
                                </td>
                            </tr>
                    {% endfor %}
                    <!-- {% endif %} -->
                    <tr>
                        <td colspan="4"><b>Total de la commande</b></td>
                    </tr>
                </tbody>

            </table>
        </div>

        <div class="form-group">
            <label for="paid" class="col-sm-2 control-label">Montant réçu </label>
            <div class="col-sm-9">
                <input type="text" id="received" name="received"
                       autocomplete="off" onkeyup="paidAmount()"/>
            </div>
        </div> 
        <div class="form-group">
            <label for="due" class="col-sm-6 control-label">Reste à rembourser</label>
            <div class="col-sm-9">
                <input type="text" id="remained" name="remained">
            </div>
        </div>
    {% endblock%}

Вот вид:

def Search_Product_ID(request):
    template='oderTest.html'
    try:
        srch=request.GET.get('search_box')
    except:
        srch=None
    if srch:
        list_products=Product.objects.filter(code=srch)
        # print(list_products)
        context={'Product':list_products}
    else:
        messages.error(request,'Product non disponible')
        context={}
    return render(request, template, context)