How to make dynamically generated input text have separators of thousands and decimals, jquery?

In the following way I generate a list that each record has an input text

var formas_pagos = $('.formas_pagos');

    $.each(response.data, function(index,value){
                        console.log(value.disponible);
                        if (value.disponible === 0 && value.cod_forma_pago !== "4"){
                            input_cantidad = '<input type="number" style="width: 100%; font-size: 12px;" step="0.01" name="cantidad" class="cantidad" min="1" pattern="^[0-9]+" placeholder="Monto" disabled="true">';
                        }
                        else{
                            input_cantidad = '<input type="number" style="width: 100%; font-size: 12px;" step="0.01" name="cantidad" class="cantidad" attr-num-doc="' + value.forma_pago + '" min="1" pattern="^[0-9]+" placeholder="Monto">';
                        }
                        if(value.cod_forma_pago != 11)
                        $('<tr>')
                            .append($('<td/>').addClass('nuevo-td nombrePago').text(value.forma_pago))
                            .append($('<td/>').addClass('nuevo-td cantPago').text(value.disponible.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')))
                            .append('<div class="cod_forma_pago" style="display:none">' + value.cod_forma_pago + '</div>')
                            .append('<div class="cod_banco" style="display:none">' + value.Cod_Banco + '</div>')
                            .append('<div class="monto_pago" style="display:none">' + value.monto_pago + '</div>')
                            .append($('<td/>').addClass('label-cell nuevo-td')
                                .append($('<label/>').addClass('label-checkbox item-content')
                                            .append('<input type="checkbox" name="tipo_pago" class="tipo_pago derecha" attr-num-doc="' + value.forma_pago + '" value="' + value.disponible + '"/>')
                                            .append($('<span/>').addClass('item-media').append('<i class="icon icon-form-checkbox"></i>'))))
                            .append($('<td style=" padding-right: 10px; border-right-width: 10px; padding-left: 10px;"/>').addClass('label-cell classCantidad derecha')
                                                .append(input_cantidad))
                            .appendTo(formas_pagos);
                    });
                    if (nombre_tipo_envio === "Recoger en Centro de Negocio"){
                        $(".classCantidad").hide();
                    }
                    if (nombre_tipo_envio === "Envío a Domicilio Normal" || nombre_tipo_envio === "Entregar en Sucursal de Correos"){
                        $('.formas_pagos').find('td:contains("Efectivo")').parent().toggle();                  
                    }
                    myApp.hideIndicator();
                 }

I'm trying to apply the following method to apply the separators, but it does not work for me,

 $(".cantidad").on({
      "focus": function(event) {
        $(event.target).select();
      },
      "keyup": function(event) {
        $(event.target).val(function(index, value) {
          return value.replace(/\D/g, "")
            .replace(/([0-9])([0-9]{2})$/, '$1.$2')
            .replace(/\B(?=(\d{3})+(?!\d)\.?)/g, ",");
        });
      }
    });

try modifying as follows:

 $(".formas_pagos_ .cantidad").on({
      "focus": function(event) {
        $(event.target).select();
      },
      "keyup": function(event) {
        $(event.target).val(function(index, value) {
          return value.replace(/\D/g, "")
            .replace(/([0-9])([0-9]{2})$/, '$1.$2')
            .replace(/\B(?=(\d{3})+(?!\d)\.?)/g, ",");
        });
      }
    });

but it has not worked.

What could it be?

Thank you in advance.