Не удается построить innnerhtml в html-шаблонах django, используя ( for loop ) из файла static/javascript/main.js
В этом HTML шаблоне у меня был код в шаблонах Django и связанный javascript из статических файлов. Я не могу использовать (for loop) javascript для вставки innerhtml в шаблоны django html для добавления таблицы, которую я написал.
{% load static %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Split Webapp</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<div class="mb-3 row">
<label for="pass1" class="col-sm-2 col-form-label">SPLIT IN:</label>
<div class="col-sm-2">
<input id="payees" type="number" min=0 max=100>
<button type="button" class="btn btn-info" onclick="myfunction()" id="payeesbtn">ADD</button>
<div class="container my-3" id="addpayees"> </div>
</div>
</div>
<script src="{% static 'javascript/main.js' %}" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous">
</script>
</body>
</html>
**Это javascript в папке static **
console.log("javascript is working");
function myfunction() {
let add_payee = document.getElementById("payees").value;
let add_payee_column = document.getElementById("addpayees");
for (let i = 0; i < add_payee; i++) {
console.log("working");
add_payee_column.innerHTML += ` <div class="container my-3">
<h5>payee ${add_payee} </h5>
<table>
<tr>
<th>Name:</th>
<td><input type="text"></td>
</tr>
<tr>
<th>Mobile:</th>
<td><input type="text"></td>
</tr>
</table>
</div>`;
};
};