Jquery callback for input fields

[ladaposamuel]

I created a set of input fields that accepts numbers and planned to sum the inputted numbers somewhere, but jquery callback doesn't work with newly duplicated items.

   <div class="col-lg-3 col-12 my-lg-0 my-2">
                                                    <p class="card-text col-title mb-md-2 mb-0">DR</p>
                                                    <input type="text" class="form-control dr" name="DR"
                                                           placeholder=""/>
                                                </div>
                                                <div class="col-lg-3 col-12 my-lg-0 my-2">
                                                    <p class="card-text col-title mb-md-2 mb-0">CR</p>
                                                    <input type="text" class="form-control cr" name="CR"
                                                           placeholder="" />
                                                </div>

   $('.cr').blur(function () {
        var sum = 0;
        $('.cr').each(function () {
            sum += Number($(this).val());
        });
        $('.total-cr').html(Intl.NumberFormat('en-US', {}).format(sum))
    });
 $('.dr').blur(function () {
        var sum = 0;
        $('.dr').each(function () {
            sum += Number($(this).val());
        });

        $('.total-dr').html(Intl.NumberFormat('en-US', {}).format(sum))
    });

[pkh1979]

@ladaposamuel any chance you got this working?

[sirproton]

@ladaposamuel any chance you got this working?

Decided to go a different route using vuejs

[pkh1979]

Oh alright. Anyways, I figured out a way to handle this.

All you have to do is add a event listener in the repeater show function.

[sirproton]

Oh alright. Anyways, I figured out a way to handle this.

All you have to do is add a event listener in the repeater show function.

Can you put a snippet here for any future person that stumbles on this issue too. :)