clicked ImageIn array is not displaying when clicking on random brand image in container

Functionality: When a user gets into a randomised page, the table of images in the page are always randomised and will be displayed within the container. When user clicks on any individual image in the randomised page, a popup that is related to the indivual image will show and user gets to choose what they want to do with the pop up.

What has been done:

I have created an array of 1.) images in the container 2.) the popup templates

Secondly, I have managed to randomised the following 2 arrays as well.

Have attached the following code for your perusal:

//Brand Array
var BrandNameArray = ["lib/img/PAGE03/Brands/Adonis.png", "lib/img/PAGE03/Brands/AEO.png", "lib/img/PAGE03/Brands/ALDO.png", "lib/img/PAGE03/Brands/Beauty.png", "lib/img/PAGE03/Brands/Bebe.png", "lib/img/PAGE03/Brands/CEDS.png", "lib/img/PAGE03/Brands/Coach.png", "lib/img/PAGE03/Brands/Cottonon.png", "lib/img/PAGE03/Brands/Dejewel.png", "lib/img/PAGE03/Brands/esBoudoir.png", "lib/img/PAGE03/Brands/Esprit.png", "libimg/PAGE03/Brands/EtudeHouse.png", "lib/img/PAGE03/Brands/Forever21.png"];
//Offer Array
var OfferArray = ["lib/img/PAGE04/Template_A.png", "lib/img/PAGE04/Template_B.png"];
var CorrectOfferArray = ["0", "1", "0", "1", "0", "1", "0", "1", "0", "1", "0", "1", "0"];
var OfferIndex = "";

$(function() {
  //Auto populate into brand container once randomised for each Brand image
  for (i = 0; i < $('#list').find('img').length; i++) {
    //To Set random Brand
    var random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
    //Assign Variable to generate random Brands
    var Brand = BrandNameArray[random_BrandIndex];
    $('#Brand_' + (i + 1)).attr('src', Brand);
    $('#Brand_' + (i + 1)).show();
    console.log(Brand);
  }
});

//Choose Brand with popUp
function selectBrand(index) {
  var random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
  var chosenBrandIndex = OfferArray[random_BrandIndex];
  //Set option clicked to CSS change 
  $("#Brand_" + index).attr("src", (chosenBrandIndex[index - 1]));

  OfferIndex = index + "";
}

<div class="Container">
  <div id="list" class="innerScroll">
    <!--1st Row-->
    <img id="Brand_1" style="width:284px; height:140px; top:0px; left:0px; border:0px; outline:0px" onclick="selectBrand('1');">
    <img id="Brand_2" style="width:284px; height:140px; top:0px; left:330px; border:0px;" onclick="selectBrand('2');">
    <img id="Brand_3" style="width:284px; height:140px; top:0px; left:650px; border:0px;" onclick="selectBrand('3');">
    <img id="Brand_4" style="width:284px; height:140px; top:0px; left:965px; border:0px;" onclick="selectBrand('4');">

    <!--2nd Row-->
    <img id="Brand_5" style="width:284px; height:140px; top:140px; left:0px; border:0px;" onclick="selectBrand('5');">
    <img id="Brand_6" style="width:284px; height:140px; top:140px; left:330px; border:0px;" onclick="selectBrand('6');">
    <img id="Brand_7" style="width:284px; height:140px; top:140px; left:650px; border:0px;" onclick="selectBrand('7');">
    <img id="Brand_8" style="width:284px; height:140px; top:140px; left:965px; border:0px;" onclick="selectBrand('8');">

    <!--3rd Row-->
    <img id="Brand_9" style="width:284px; height:140px; top:280px; left:0px; border:0px;" onclick="selectBrand('9');">
    <img id="Brand_10" style="width:284px; height:140px; top:280px; left:330px; border:0px;" onclick="selectBrand('10');">
    <img id="Brand_11" style="width:284px; height:140px; top:280px; left:650px; border:0px;" onclick="selectBrand('11');">
    <img id="Brand_12" style="width:284px; height:140px; top:280px; left:965px; border:0px;" onclick="selectBrand('12');">

    <!--4th Row-->
    <img id="Brand_13" style="width:284px; height:140px; top:280px; left:0px; border:0px;" onclick="selectBrand('13');">
  </div>
</div>

Issue:

When user clicks on the image, the pop-up is not displayed and the following error in the console is shown:

Uncaught TypeError: Cannot read property '10' of undefined

I would like to ask why is it not defined when I have a variable in the array and it is randomising the array.

Secondly, I would like to ask for help on how to rectify please.

Thanks.