jquery.repeater Jquery callback for input fields

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))
    });

Screenshot 2023-04-08 at 10 24 36 AM