jQuery Mask does not work on elements created dynamically

Question

I’m using the jQuery Mask to format currency in a form, and in this form it is possible to add several values dynamically and for this I duplicate the div that contains the input, only when duplicating this div jQuery Mask stops working in this new input created, how can I solve this?

Structure:

<div id="payment_draft">
    <div class="form-group col-xl-6">
        <label for="paid_value">Valor Pago</label>
        <input type="text" class="form-control money_format" name="paid_value">
    </div>
</div>

<button class="btn_add_payment">Duplicar</button>

<script type="text/javascript">

    $('.money_format').mask('#.##0,00', {reverse: true});

    $(document).on('click', '.btn_add_payment', function(){

        var payment = $('#payment_draft');
        var container = $('.payments_container'); //adiciona em outra div

        var copy = payment.clone();

        container.append(copy)
    });

</script>

Answer 1

Use the form below to apply the plugin automatically when the field gains focus, including fields cloned or dynamically added:

$(document).on("focus", ".money_format", function() { 
   $(this).mask('#.##0,00', {reverse: true});
});

See functioned:

$(document).on("focus", ".money_format", function() { 
   $(this).mask('#.##0,00', {reverse: true});
});


$(document).on('click', '.btn_add_payment', function(){

   var payment = $('#payment_draft');
   var container = $('.payments_container'); //adiciona em outra div
   
   var copy = payment.clone();
   
   container.append(copy)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.12/jquery.mask.min.js"></script>
<div class="payments_container">
   <div id="payment_draft">
       <div class="form-group col-xl-6">
           <label for="paid_value">Valor Pago</label>
           <input type="text" class="form-control money_format" name="paid_value">
       </div>
   </div>
</div>
<button class="btn_add_payment">Duplicar</button>

Note: when cloning the div, you are doubling the id="payment_draft". An id should be unique on the page. I suggest changing for class="payment_draft".

Answer 2

Cloning an HTML won’t clone the eventListener pointing to the elements of this HTML.

How the mask of jQuery is a eventListener, you need to assign it to the cloned elements as well:

$(document).on('click', '.btn_add_payment', function(){

    var payment = $('#payment_draft');
    var container = $('.payments_container'); //adiciona em outra div

    var copy = payment.clone();
    copy.find('.money_format').mask('#.##0,00', {reverse: true});

    container.append(copy)
});