jQuery, возвращающий только последний элемент, Google charts API

У меня есть следующий код, который будет принимать массив и динамически добавлять на страницу QR-код с текстом, являющимся элементом в массиве.

$(document).ready(function () {
            var list = ['dog', 'cat', 'mouse', 'hippo', 'ox'];
            var qrUrl = 'https://chart.googleapis.com/chart?';

            //functions
            function getQrCodes(array) {

                $.each(array, function (ix, val) {
                    //options gets chl property redefined for each element
                    //in the array
                    var options = {
                        cht: 'qr',
                        chs: '300x300',
                        chl: array[ix]
                    }
                    qrOptionArray.push(options);
                    console.log('this qr should be: ' + array[ix]);
                    console.log(qrUrl + $.param(options));
                    var $img = $('img').attr('src', qrUrl + $.param(options)).appendTo('body');

                });

            }

            getQrCodes(list);
        });

Вы можете увидеть вывод консоли из скрипкиВот хотя по какой-то причине QR-коды не появляются в окне скрипты, они появляются на моей локальной машине. У меня проблема в том, что последнее, несмотря на то, что вы видите изменение вывода консоли для каждого элемента в массиве, единственный QR-код, который я получаю, - это последний элемент в массиве, повторенный X раз. Каждая из этих банок QR отсканирует и напечатает «бык», даже если вывод на консоль правильный. Что тут происходит?

Ответы на вопрос(1)

Ваш ответ на вопрос