I had been trying to calculate cost and quantity using the following reply from (Calculate Repeater Meta Box Input Field Values and Display Total) RiddleMeThis and another reply by Filipeelia (https://stackoverflow.com/questions/35710039/how-to-make-a-sum-of-number-fields-to-single-field-in-contact-form-7-in-wordpres) to work:

calculate = function(){
    var total = 0;
    $('.wpp-repeater-input').each(function () {
        total += parseInt($(this).val());

    document.getElementById('wpp_investment_total').value = parseInt(total);

my code:

jQuery (function ($) {
    var $qty = $('.iqty'),
        $total = $('#item-total');

    $qty.on('input', function(e) {
        var final_value = 1;
        $qty.each(function() {
            var value = $(this).val();
            if (!isNaN(value) && value > 0) final_value += parseInt(value);

It works for the first field but not the subsequent.

I have tried using class instead of ID, placing the function top-most on the header, but it doesn't work.

I am not able to understand why it shouldn't work as it is working for the first field.

My view is that the subsequent repeated fields are not loaded along with the page hence do not call the function.

I am not sure of that as I am still at a beginner's stage. Also, even if I am right with the notion, I tried to search and came across init() and DOM events sorts, which I am not very sure of.

It would be great if someone can point me to some direction.

Many thanks in advance

Thursday February 18, 2021 UPDATE:

I have been trying to addEventListeners to the repeating fields. I have had success with getting responses with each repeating field. But I am not going any further.

I am stuck at how to get siblings as they are nested within div/label/span/input is here...

It would be great to hear how to get them.

Thank you