Javascript for loop index starting from the max number

Question

I need a solution on how to get this solved. javascript loop function not working well in AJAX return function.

 var selectedColor = '';
var selectedSize = '';
var selectedQuantity = '';
var productID = '';
var indexCount;
$('.up-cart').on('click', function() {
    var cartRows = $('.cartRows').length;
    for (indexCount = 0; indexCount <= cartRows; indexCount++) {
        $('.myOrderSettings [name="selectedColor' + indexCount + '"]').each(function() {
            if ($(this).prop("checked")) {
                if (selectedColor == "") {
                    selectedColor += $(this).val();
                } else {
                    selectedColor += ',' + $(this).val();
                }
            }
        });
        $('.myOrderSettings [name="selectedSize' + indexCount + '"]').each(function() {
            if ($(this).prop("checked")) {
                if (selectedSize == "") {
                    selectedSize += $(this).val();
                } else {
                    selectedSize += ',' + $(this).val();
                }
            }
        });
        $('.myOrderSettings [name="selectedQuantity' + indexCount + '"]').each(function() {
            if ($(this).val() < 1) {
                selectedQuantity = '1';
                alertMe("Your order quantity has been set to 1", 5000);
            }
            if (parseInt($(this).val()) > parseInt($(this).attr('max'))) {
                selectedQuantity = $(this).attr('max');
                alertMe("We have " + $(this).attr('max') + " of this product. Your order quantity has been set to " + $(this).attr('max'), 5000);
            } else {
                selectedQuantity = $(this).val();
            }
        });

        productID = $('.myOrderSettings [name="productID' + indexCount + '"]').val();

        $.ajax({
            url: "<?php echo base_url() ?>cart/updateCart",
            type: "post",
            dataType: "json",
            data: {
                selectedColor: selectedColor,
                selectedSize: selectedSize,
                selectedQuantity: selectedQuantity,
                productID: productID
            },
            success: function(data) {
                console.log(indexCount);
                $('.myOrderSettings .t-total' + indexCount).html(formatMoney(parseInt(data.cart_amount)));
            }
        });
        calculateTotalAmount();
        selectedColor = "";
        selectedSize = "";
        selectedQuantity = "";
        productID = "";
    }

});

The result on the console I get in console is 6 meanwhile I have a total of 5 rows. This is hindering me from returning the result to the objects respectively. Check the result in the console

Answer 1

I just got it solved, I noticed async wasn't set to false so here's my solution. but other solutions would be welcomed.

var selectedColor = '';
var selectedSize = '';
var selectedQuantity = '';
var productID = '';
var indexCount;
$('.up-cart').on('click', function() {
    var cartRows = $('.cartRows').length;
    for (indexCount = 0; indexCount <= cartRows; indexCount++) {
        $('.myOrderSettings [name="selectedColor' + indexCount + '"]').each(function() {
            if ($(this).prop("checked")) {
                if (selectedColor == "") {
                    selectedColor += $(this).val();
                } else {
                    selectedColor += ',' + $(this).val();
                }
            }
        });
        $('.myOrderSettings [name="selectedSize' + indexCount + '"]').each(function() {
            if ($(this).prop("checked")) {
                if (selectedSize == "") {
                    selectedSize += $(this).val();
                } else {
                    selectedSize += ',' + $(this).val();
                }
            }
        });
        $('.myOrderSettings [name="selectedQuantity' + indexCount + '"]').each(function() {
            if ($(this).val() < 1) {
                selectedQuantity = '1';
                alertMe("Your order quantity has been set to 1", 5000);
            }
            if (parseInt($(this).val()) > parseInt($(this).attr('max'))) {
                selectedQuantity = $(this).attr('max');
                alertMe("We have " + $(this).attr('max') + " of this product. Your order quantity has been set to " + $(this).attr('max'), 5000);
            } else {
                selectedQuantity = $(this).val();
            }
        });

        productID = $('.myOrderSettings [name="productID' + indexCount + '"]').val();

        $.ajax({
            url: "<?php echo base_url() ?>cart/updateCart",
            type: "post",
            dataType: "json",
            async: false,
            data: {
                selectedColor: selectedColor,
                selectedSize: selectedSize,
                selectedQuantity: selectedQuantity,
                productID: productID
            },
            success: function(data) {
                console.log(indexCount);
                $('.myOrderSettings .t-total' + indexCount).html(formatMoney(parseInt(data.cart_amount)));
            }
        });
        calculateTotalAmount();
        selectedColor = "";
        selectedSize = "";
        selectedQuantity = "";
        productID = "";
    }

});