Django поиск автозаполнения на новой строке таблицы

Question

Я реализовал автозаполнение поиска Django с https://medium.com/@ninajlu/django-ajax-jquery-search-autocomplete-d4b4bf6494dd, и он работает просто отлично.
Я использую его на входе таблицы с id = "nome_material"

views.py:
def autocompleteModelMaterial(request):
    if request.is_ajax():
        q = request.GET.get('term', '')
        search_qs = Material_tabela.objects.filter(nome_material__istartswith=q)
        results = []
        print( q)
        for r in search_qs:
            results.append(r.nome_material)
        data = json.dumps(results)
    else:
        data = 'fail'
    mimetype = 'application/json'
    return HttpResponse(data, mimetype)


urls.py:
url(r'^ajax_calls/searchMaterial/', views.autocompleteModelMaterial),


JQuery:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>


javascript that calls ajax:
$(document).ready(function(){ 
  $('[id="nome_material"]').autocomplete({
      source: "/ajax_calls/searchMaterial/",
      minLength: 2,
      open: function(){
          setTimeout(function () {
              $('.ui-autocomplete').css('z-index', 99);
          }, 0);
      }
    });
});


html -> form:
<form action="" method="post" enctype="application/x-www-form-urlencoded">
    {% csrf_token %}
    {{ form.as_p }}
    <table id="leituras_table" class="table table-striped table-hover vertical-scroll tablesorter"
           onscroll="rolarOutraBarra('leituras_table', 'scroller');">
        <thead>
        <tr id="linha1">
            <th>Nome material</th>
            <th>Empresa 1</th>
            <th>Valor 1</th>
            <th>Empresa 2</th>
            <th>Valor 2</th>
            <th>Empresa 3</th>
            <th>Valor 3</th>
            <th>Valor a utilizar</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><input style="text-align:center;" id="nome_material" class="form-control input-group-lg" type="text" name="nome_material1"></td>
            <td><input style="text-align:center;" id="empresa1_1" class="form-control input-group-lg" type="text" name="empresa1_1"></td>
            <td><input style="text-align:center;" id="valor1_1" class="form-control input-group-lg" type="text" name="valor1_1"></td>
            <td><input style="text-align:center;" id="empresa1_2" class="form-control input-group-lg" type="text" name="empresa1_2"></td>
            <td><input style="text-align:center;" id="valor1_2" class="form-control input-group-lg" type="text" name="valor1_2"></td>
            <td><input style="text-align:center;" id="empresa1_3" class="form-control input-group-lg" type="text" name="empresa1_3"></td>
            <td><input style="text-align:center;" id="valor1_3" class="form-control input-group-lg" type="text" name="valor1_3"></td>
            <td><input style="text-align:center;" id="valorFinal_1" class="form-control input-group-lg" type="text" name="valorFinal_1"></td>
        </tr>
        </tbody>
    </table>
    <br>
    <center> <button name="buscar" class="btn btn-primary" type="submit">Buscar</button> </center>
    <center> <button name="enviar" class="btn btn-primary" type="submit">Enviar</button> </center>
    <input type="button" class="button" value="Add another line" onclick="addField();">
</form>

Но теперь я создал кнопку для добавления новой строки в таблицу.

Javascript:
function addField (argument) {
    var myTable = document.getElementById("leituras_table");
    var currentIndex = myTable.rows.length;
    var currentRow = myTable.insertRow(-1);

    var nome_material = document.createElement("input");
    nome_material.setAttribute("id", "nome_material");
    nome_material.setAttribute("name", "nome_material");
    nome_material.setAttribute("type", "text");
    nome_material.setAttribute('class', 'form-control input-group-lg');

    var empresa1 = document.createElement("input");
    empresa1.setAttribute("name", "empresa1_" + currentIndex);
    empresa1.setAttribute("type", "text");
    empresa1.setAttribute('class', 'form-control input-group-lg');

    var valor1 = document.createElement("input");
    valor1.setAttribute("name", "valor1_" + currentIndex);
    valor1.setAttribute("type", "text");
    valor1.setAttribute('class', 'form-control input-group-lg');

    var empresa2 = document.createElement("input");
    empresa2.setAttribute("name", "empresa2_" + currentIndex);
    empresa2.setAttribute("type", "text");
    empresa2.setAttribute('class', 'form-control input-group-lg');

    var valor2 = document.createElement("input");
    valor2.setAttribute("name", "valor2_" + currentIndex);
    valor2.setAttribute("type", "text");
    valor2.setAttribute('class', 'form-control input-group-lg');

    var empresa3 = document.createElement("input");
    empresa1.setAttribute("name", "empresa3_" + currentIndex);
    empresa3.setAttribute("type", "text");
    empresa3.setAttribute('class', 'form-control input-group-lg');

    var valor3 = document.createElement("input");
    valor1.setAttribute("name", "valor3_" + currentIndex);
    valor3.setAttribute("type", "text");
    valor3.setAttribute('class', 'form-control input-group-lg');

    var valor_final = document.createElement("input");
    valor_final.setAttribute("name", "valorFinal_" + currentIndex);
    valor_final.setAttribute("type", "text");
    valor_final.setAttribute('class', 'form-control input-group-lg');



    var currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(nome_material);

    currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(empresa1);

    currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(valor1);

    currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(empresa2);

    currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(valor2);

    currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(empresa3);

    currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(valor3);

    currentCell = currentRow.insertCell(-1);
    currentCell.appendChild(valor_final);
}

Кнопка работает лучше и создайте мои новые строки.Но я не могу использовать «Автозаполнение поиска» в этих новых строках.Он работает только в первом ряду, хотя 'id' остается неизменным (nome_material) в новых строках.

Я полагаю, что JavaScript, который добавляет новую строку, должен обновить мое представление.Это так?
Не знаете, имеет ли это смысл или даже как это сделать.

Как работать с javascript "document.createElement" в django?
Есть идеи?