Image is not displayed when parent image is clicked

Functionality:

When user enters the first page, the primary images are randomised and displayed. Therefore, when user clicks on the primary image (1st image), a secondary image (a 2nd image) will be displayed.

The secondary image is an extension to the 1st image, therefore, for e.g, when a user clicks on the 1st image of an apple, the second image of a worm is displayed.

What I have done:

I have set both the 1st images and 2nd images into a set of an array. Secondly, the array of 1st image is randomised, hence, I have set the 2nd array of image to append to the 1st randomised image.

I have attached the following code for your perusal:

//Brand Array
var BrandNameArray = ["lib/img/PAGE03/Brands/anis.png", "lib/img/PAGE03/Brands/aeo.png", "lib/img/PAGE03/Brands/alo.png", "lib/img/PAGE03/Brands/beauty.png", "lib/img/PAGE03/Brands/bbe.png", "lib/img/PAGE03/Brands/eds.png", "lib/img/PAGE03/Brands/coch.png", "lib/img/PAGE03/Brands/cotnon.png", "lib/img/PAGE03/Brands/dewel.png", "lib/img/PAGE03/Brands/esdoir.png", "lib/img/PAGE03/Brands/erit.png", "lib/img/PAGE03/Brands/ethouse.png"];
//Corresponding Image Array
var OfferArray = ["lib/img/PAGE04/adonis.png", "lib/img/PAGE04/aeo.png", "lib/img/PAGE04/aldo.png", "lib/img/PAGE04/beauty.png", "lib/img/PAGE04/bebe.png", "lib/img/PAGE04/ceds.png", "lib/img/PAGE04/coach.png", "lib/img/PAGE04/cottonon.png", "lib/img/PAGE04/dejewel.png", "lib/img/PAGE04/esboudoir.png", "lib/img/PAGE04/esprit.png", "lib/img/PAGE04/etudehouse.png"];

$(function() {

  //Auto populate into brand container once randomised for each Brand image
  var BrandNameArrayBackup = JSON.parse(JSON.stringify(BrandNameArray));
  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];
    BrandNameArray.splice(random_BrandIndex, 1);
    $('#Brand_' + (i + 1)).attr('src', Brand);
    $('#Brand_' + (i + 1)).show();
    console.log(Brand);
  }
  BrandNameArray = BrandNameArrayBackup; //re-assigning values back to array
});

//Choose Brand with popUp
function selectBrand(index) {

  $('#Vivo_BrandDescription').fadeIn({
    duration: slideDuration,
    queue: false
  });
  $("#All").hide();
  $("#Back").hide();
  $("#Beauty").hide();
  $("#Choose").hide();
  $("#Fashion").hide();

  var chosenBrandIndex = OfferArray[BrandNameArray];
  //Set option clicked to CSS change 
  $('#Description').attr('src', chosenBrandIndex);
  $('#Description').show();
}

function Vivo_BrandDescription() {
  idleTime = 0;

  $("#border_page").fadeOut(function() {
    $("#Vivo_BrandDescription").fadeIn();
  });
}

<div id="ChooseBrand" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; z-index=3; top:0px; left:0px;">
  <img id="Main" src="lib/img/PAGE03/Background.png" />
  <input type="text" id="SearchField" style="position:absolute; top:190px; left:660px; height:40px; width:600px; outline=0px; border: 0; font-size:25px; font-family:'CenturyGothic'; background: transparent; z-index=4;" autofocus src="lib/img/transparent.png">
  <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');">
    </div>
  </div>
</div>

<div id="BrandDescription" class="menu" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display:none; top:0px; left:0px; z-index=10;">

  <img id="Description" style="position:absolute; top:124px; left:534px;z-index=11;">

</div>

Issue:

There is the main issue that I am currently facing at the moment

**When I clicked on the primary image, the secondary image is not being displayed at all. Therefore, none of the secondary array image is appended to the first randomised image. hence, the secondary image is not displayed.

I am lost at what could have possibly gone wrong or missing. Please help.

Your help is much much appreciated.