limiting appended div in jQuery

Question

Trying to limit my appended div to 4, I found a simple answer however when I use it in two different $.each() only 1 of the two $.each() gets the limit.

Say I have -- this will return 4 divs but if I have two of these 1 will have 4 divs and other will have no items appended.

var maxAppend = 0;
$.each(data.drinks.Upsell, function (index, value) {
    if (maxAppend >= 4) return;
    maxAppend++;
    $('#rcmd_snacks_list').append(
        '<div class="col-md-3 col-sm-6"> <div class="thumbnail">' +
        '<div class="image">' + '<img src="./assets/imgs/' + value.image + '" alt="' + value.name + '" class="img-responsive"> </div>' +
        '<div class="caption">' +
        '<p class="item-name">' + value.name + '</p>' +
        '<p class="price">£' + parseFloat(value.price).toFixed(2) + '</p>' +
        '<div class="row"> <button data-key="' + value.name + '" class="btn btn-success btn-sm addToCart" onClick="openNutritionInfo()"> <i class="fa fa-info fa-1x"></i> Nutrition Info</button> </div>' +
        '</div>' +
        '</div> </div>'
    );
});

Same as above --

$.each(data.snacks.Upsell, function (index, value) {
    if (maxAppend >= 4) return;
    maxAppend++;
    $('#rcmd_drinks_list').append(
        '<div class="col-md-3 col-sm-6"> <div class="thumbnail">' +
        '<div class="image">' + '<img src="./assets/imgs/' + value.image + '" alt="' + value.name + '" class="img-responsive"> </div>' +
        '<div class="caption">' +
        '<p class="item-name">' + value.name + '</p>' +
        '<p class="price">£' + parseFloat(value.price).toFixed(2) + '</p>' +
        '<div class="row"> <button data-key="' + value.name + '" class="btn btn-success btn-sm addToCart" onClick="openNutritionInfo()"> <i class="fa fa-info fa-1x"></i> Nutrition Info</button> </div>' +
        '</div>' +
        '</div> </div>'
    );
});

I expected them to append 4 divs not (4 and none).

Answer 1

As I mentioned in the comments, it's better to set maxAppend as the actual max value. This way, there's no need to reset or modify the maxAppend value.

var maxAppend = 4; // or const
$.each(data.drinks.Upsell, function (index, value) {
    if (index >= maxAppend) return; // correction: NOT +1
    $('#rcmd_drinks_list').append(
        '<div class="col-md-3 col-sm-6"> <div class="thumbnail">' +
        '<div class="image">' + '<img src="./assets/imgs/' + value.image + '" alt="' + value.name + '" class="img-responsive"> </div>' +
        '<div class="caption">' +
        '<p class="item-name">' + value.name + '</p>' +
        '<p class="price">£' + parseFloat(value.price).toFixed(2) + '</p>' +
        '<div class="row"> <button data-key="' + value.name + '" class="btn btn-success btn-sm addToCart" onClick="openNutritionInfo()"> <i class="fa fa-info fa-1x"></i> Nutrition Info</button> </div>' +
        '</div>' +
        '</div> </div>'
    );
});

Answer 2

You can simply use the index provided by $.each callback method:

$.each(data.snacks.Upsell, function (index, value) {
    if (index >= 4 ) return;

    $('#rcmd_drinks_list').append(
        '<div class="col-md-3 col-sm-6">  .... </div>'
    );
});

If want to append other elements in future, you'd better synchronize your counter with already existing div within your container:

var childrenDivs= $('#rcmd_snacks_list > div'); // get direct children div 
var maxAppend = 4;
var remainingSlots = maxAppend - childrenDivs.size();

$.each(data.snacks.Upsell, function (index, value) {
    if (remainingSlots <= 0) return;
    remainingSlots--;
    $('#rcmd_drinks_list').append(
        '<div class="col-md-3 col-sm-6">  .... </div>'
    );
});