Limit dynamic fields in jquery

Question

I have this function to generate fields dynamically, as I can by a generated field limit.

$(function () {
    var scntDiv = $('#dynamicDiv');

    $(document).on('click', '#addInput', function () {
        $('<p>' +
                '<input type="text" id="inputeste" name="beneficio[]" class="form-control" placeholder="Adicionar beneficio" /> ' +
                '<a class="btn btn-danger btn-sm" href="javascript:void(0)" id="remInput">' +
                '<span class="glyphicon glyphicon-minus " aria-hidden="true"></span> ' +
                'Remover beneficio' +
                '</a>' +
                '</p>').appendTo(scntDiv);
        return false;
    });

    $(document).on('click', '#remInput', function () {
        $(this).parents('p').remove();
        return false;
    });
});

Answer 1

Place a counter, and if you reach the limit does not add more:

var contador = 0;
var limite = 5;

$(function() {
    var scntDiv = $('#dynamicDiv');

    $(document).on('click', '#addInput', function() {
        if (contador < limite) {
            $('<p>' +
                '<input type="text" id="inputeste" name="beneficio[]" class="form-control" placeholder="Adicionar beneficio" /> ' +
                '<a class="btn btn-danger btn-sm" href="javascript:void(0)" id="remInput">' +
                '<span class="glyphicon glyphicon-minus " aria-hidden="true"></span> ' +
                'Remover beneficio' +
                '</a>' +
                '</p>').appendTo(scntDiv);
            contador++; // incremento do contador
        }
        return false;
    });

    $(document).on('click', '#remInput', function() {
        $(this).parents('p').remove();
        if (contador > 0)
            contador--; // remover do contador tb
        return false;
    });
});

Answer 2

$(function () {
    var scntDiv = $('#dynamicDiv');
    var i = 0;

    $(document).on('click', '#addInput', function () {
        if (i > 10) return false;

        i++;
        $('<p>' +
                '<input type="text" id="inputeste" name="beneficio[]" class="form-control" placeholder="Adicionar beneficio" /> ' +
                '<a class="btn btn-danger btn-sm" href="javascript:void(0)" id="remInput">' +
                '<span class="glyphicon glyphicon-minus " aria-hidden="true"></span> ' +
                'Remover beneficio' +
                '</a>' +
                '</p>').appendTo(scntDiv);
        return false;
    });

    $(document).on('click', '#remInput', function () {
        $(this).parents('p').remove();
        return false;
    });
});

Answer 3

Just adding an alternative to the previous answers... How would you like to just count the number of children your div has?

if($('#dynamicDiv').children().length < count)