Отображение 2 наборов разных изображений случайным образом в последовательных делениях

У меня есть 2 набора различных изображений.

Первый набор: img1.jpg, img2.jpg, img3, jpg

второй комплект: imga.jpg, imgb.jpg, imgc.jpg

Также у меня есть три разных divs #one, #two, #three.

Каждый набор изображений должен следовать последовательности. img1.jpg должен вставляться в div #one, img2.jpg должен вставляться в div #two & img3.jpg, должен вставляться в div # три.

То же самое должно произойти и для второго набора изображений. Но наборы изображений будут меняться случайным образом.

Я хочу показать наборы изображений случайным образом. Значит, когда пользователь войдет в систему, они могут увидеть первый набор изображений, после обновления они могут увидеть второй набор изображений.

До сих пор я могу рандомизировать массив изображений. Но изображения не встраиваются в последовательность div. Все изображения встраиваются в один div

Посмотрите мой код, исправьте меня, где я ошибаюсь:

$(function () {
    var arr1 = ["map_slice_1.jpg", "map_slice_2.jpg", "map_slice_3.jpg", "map_slice_4.jpg", "map_slice_5.jpg", "map_slice_6.jpg",
        "map_slice_7.jpg", "map_slice_8.jpg"];
    var arr2 = ["kolkata_1.jpg", "kolkata_2.jpg", "kolkata_3.jpg", "kolkata_4.jpg", "kolkata_5.jpg", "kolkata_6.jpg", "kolkata_7.jpg",
        "kolkata_8.jpg"];
    var currentArr = Math.random() < 0.5 ? arr1 : arr2;
    $.each(currentArr, function (i, val) {
        var i = 0;
        while (i++ < 8) {
            $('#map_slice_' + i).append('<img src="map/' + val + '"/>');
        }
        //$('#yourContainer').append('<img src="'+val+'"/>');
    });
});