Unable to call randomised Images correctly to parent array

Functionality Corresponding image will fade in and display when user clicks on the parent image. Therefore, the secondary image will correspond to the parent image.

What I have done:

All images are set into arrays, where they are all randomised. Furthermore, I have append the array of the corresponding images to the array of randomised image and append it to the displaying div tag.

I have attached the 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", "lib/img/PAGE03/Brands/forr2.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", "lib/img/PAGE04/forever21.png", ];
  var CorrectOfferArray = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
  var OfferIndex = "";

  $(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 random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
    var chosenBrandIndex = OfferArray[random_BrandIndex];
    //Set option clicked to CSS change 
    $('#Description').attr('src', chosenBrandIndex);
    $('#Description').show();
    OfferIndex = index + "";
  }

  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 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;">
      <button id="Close" onclick="Close()"></button>
      <button id="LikeBrand" onclick="LikeBrand()"></button>
      <button id="DislikeBrand" onclick="DislikeBrand()"></button>
      <button id="Reset" onclick="Reset()"></button>
    </div>

Issue:

The corresponding image when displayed does not tally with the parent image. Meaning: If the parent image is displaying an apple image, and when the user clicks on the apple image, the corresponding image that will be displayed is a worm. However, at this instance, when user clicks on the parent image of "apple", the corresponding image of a banana is shown. Therefore, the randomised corresponding image is showing the wrong image when the parent image is clicked.

What has caused an error in the function?? I am not getting it.