Second image is not displayed correctly when first image is clicked

Functionality:

When user clicks on a first image, the second image will fade in and be displayed. The second image is a child of the first image. Therefore, the second image shown has to be connected with the first image.

For e.g: there are 4 images and they are grouped in an array. for first imagevar firstImage= ["image1", "image2", "image3", "image4"] for second imagevar secondImage= ["image1a", "image2a", "image3a", "image4a"]

therefore, when I click on "image1", the corresponding image that will fade in will be "image1a"

What I have done:

As stated above:

1.) I have grouped the 2 different images into an array 2.) I have randomised the first array of images and it is displayed in the list in a randomised manner. 3.) I have tried to append the second image to the first image when clicked.

This is my code:

 var slideDuration = 1200;
 var idleTime = 0;
 var BrandNameArray = ["http://ift.tt/1q0PSsB?", "http://ift.tt/1BE5xku", "http://ift.tt/1q0PSsB?", "http://ift.tt/1BE5xku"];

 var OfferArray = ["http://ift.tt/1BE5xku", "http://ift.tt/1q0PSsB?", "http://ift.tt/1BE5xku", "http://ift.tt/1q0PSsB?"];



 $(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
 });

 function selectBrand(index) {

   $('#Vivo_BrandDescription').fadeIn({
     duration: slideDuration,
     queue: false
   });

   var chosenBrandIndex = OfferArray[index];
   //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;">

  <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" data-brand="1">
      <img id="Brand_2" style="width:284px; height:140px; top:0px; left:330px; border:0px;" data-brand="2">
      <img id="Brand_3" style="width:284px; height:140px; top:0px; left:650px; border:0px;" data-brand="3">
      <img id="Brand_4" style="width:284px; height:140px; top:0px; left:965px; border:0px;" data-brand="4">

    </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:

At this point in time, is that when I click on a random image, the corresponding image is not correctly displayed.

For example, when I clicked on "image1", the resulting image that faded in is displaying "image4a" instead of "image1a". All first array images have been randomised.

Hence, what have I done incorrectly or not done. Please help, thanks.