problem on showing calculated value in django formsets field using javascript

Question

I am trying to calculate the total value using the quantity and rate. Once the user enters it in the field and shows it in amount field.

The field disappears after entering a value rather than showing the calculated value and this message is shown in the console:

Empty string passed to getElementById()

 <div class="table-responsive">
                                <table class="table table-striped table-borderless border-0 border-b-2 brc-default-l1">
                                    {{ iform.management_form }}
                                    <thead class="bg-none bgc-default-tp1">
                                        <tr class="text-white">
                                            {{ iform.item_no.errors }}
                                            <th><label for="{{ iform.item_no.id_for_label }}">S.N</label></th>
                                            {{ iform.particular.errors }}
                                            <th><label for="{{ iform.particular.id_for_label }}">Particular</label>
                                            </th>
                                            <!-- {{ iform.alt_qty.errors }}
                                            <th><label for="{{ iform.alt_qty.id_for_label }}">Alt Qty</label></th> -->
                                            {{ iform.qty.errors }}
                                            <th><label for="{{ iform.qty.id_for_label }}">Qty</label></th>
                                            {{ iform.Uom.errors }}
                                            <th><label for="{{ iform.Uom.id_for_label }}">Uom</label></th>
                                            {{ iform.rate.errors }}
                                            <th><label for="{{ iform.rate.id_for_label }}">Rate</label></th>
                                            {{ iform.discount.errors }}
                                            <th><label for="{{ iform.discount.id_for_label }}">Discount</label></th>
                                            {{ iform.amount.errors }}
                                            <th><label for="{{ iform.amount.id_for_label }}">Amount</label></th>
                                        </tr>
                                    </thead>
                                    {% for iforms in iform %}
                                    <tbody >
                                        <tr>
                                            <td>{{ iforms.item_no }}</td>
                                            <td>{{ iforms.particular }}</td>
                                            <!-- <td>{{ iforms.alt_qty }}</td> -->
                                            <td id="itemqty">{{ iforms.qty }}</td>
                                            <td>{{ iforms.Uom }}</td>
                                            <td id="itemrate">{{ iforms.rate }}</td>
                                            <td id="itemdiscount">{{ iforms.discount }}</td>
                                            <td id="itemamount">{{ iforms.amount }}</td>
                                        </tr>
                                    </tbody>
                                    {% endfor %}
                                </table> 
                                <input type="hidden" value="false" name="itemadd" id="itemadd">
                                <button class="btn btn-primary" id="additemsbutton">Add items</button>
                                <!-- <button id="add-form" type="button">Add Another Bird</button> -->
                            </div>
                        </div>

 <script>
    $(document).ready(function () {
        $("#additemsbutton").on('click', function (event) {
            $("#itemadd").val("true");
        });
    });
    
    $(document).ready(function () {
    $("#itemqty").on('keyup',function(){
        var itemquantity = parseFloat($(this).val());
        var itemrate = parseFloat($("#itemrate").val());
        $("#itemamount").html(parseFloat(itemquantity * itemrate));
       });
    $("#itemrate").on('keyup',function(){
        var itemquantity =parseFloat($("#itemqty").val());
        var itemrate =parseFloat($(this).val());
        $("#itemamount").html(parseFloat(itemquantity * itemrate));
       });
    });
</script>

views.py

def invoice(request):
extra_forms = 1
ItemFormSet = formset_factory(ItemForm, extra=extra_forms)
if request.method == 'POST':
    customerform = CustomerForm(request.POST)
    calform = CalculateForm(request.POST)     
    if 'itemadd' in request.POST and request.POST['itemadd'] == 'true':
        formset_dictionary_copy = request.POST.copy()
        formset_dictionary_copy['form-TOTAL_FORMS'] = int(
            formset_dictionary_copy['form-TOTAL_FORMS']) + extra_forms
        itemform = ItemFormSet(formset_dictionary_copy)       
    else:
        itemform = ItemFormSet(request.POST)
        if itemform.is_valid() & customerform.is_valid() & calform.is_valid():
            return HttpResponse('/thankyou')
else:
    customerform = CustomerForm()
    itemform = ItemFormSet()
    calform = CalculateForm()
return render(request, 'accounting/invoice.html', {'form': customerform, 'iform': itemform, 'calform': calform})