Цикл javascript не работает для вычисления полей формсета django вычисляет только одно поле формсета с id, например id_forms-0-rate

Это код в моем шаблоне, который принимает значение из поля ввода id и вычисляет значение. Код работает только для одного поля или элемента набора форм, например, имеющего id= id_form-0-rate. Я не знаю, почему цикл не работает для дополнительного набора форм, например, имеющего id= id_form-1-rate.

template.html

 <script type = "text/javascript" >
        var id= $("#id_form-TOTAL_FORMS").val();
        console.log(id); 
        for(let i=0; i<10; i++)
        {
            console.log(i);
        $("#id_form-" + i + "-quantity").keyup(function () {
            var rate = parseFloat($("#id_form-" + i + "-rate").val());
            var quantity = parseFloat($("#id_form-" + i + "-quantity").val());
            var discount = parseFloat($("#id_form-" + i + "-discount").val());
            $("#id_form-" + i + "-amount").val(rate * quantity - discount);
        });
        $("#id_form-" + i + "-rate").keyup(function () {
            var rate = parseFloat($("#id_form-" + i + "-rate").val());
            var quantity = parseFloat($("#id_form-" + i + "-quantity").val());
            var discount = parseFloat($("#id_form-" + i + "-discount").val());
            $("#id_form-" + i + "-amount").val(rate * quantity - discount);
        });
        $("#id_form-" + i + "-discount").keyup(function () {
            var rate = parseFloat($("#id_form-" + i + "-rate").val());
            var quantity = parseFloat($("#id_form-" + i + "-quantity").val());
            var discount = parseFloat($("#id_form-" + i + "-discount").val());
            $("#id_form-" + i + "-amount").val(rate * quantity - discount);
        });
        }
</script>

<script>
$(document).on('keyup',"input[id$='-quantity']",fn);
$(document).on('keyup',"input[id$='-rate']",fn);
$(document).on('keyup',"input[id$='-discount']",fn);
function fn(){
   var rate = parseFloat($(this).closest("#parent").find("input[id$='-rate']").val());
   var quantity = parseFloat($(this).closest("#parent").find("input[id$='-quantity']").val());
   var discount = parseFloat($(this).closest("#parent").find("input[id$='-discount']").val());
   $(this).closest("#parent").find("input[id$='-amount']").val(rate * quantity - discount);
};
</script>

{% csrf_token %}
{{ formset.management_form }}
{% for form in formset %}
<div id="parent">
   {{ form.as_p }}
</div>
{% endfor %}