Image is not displayed when onclick

Functionality:

User navigate to the menu page where it shows a list of image brands. When user clicks on an individual image brand, a image description of the brand chosen will be displayed as a popup.

Therefore, lastly, when user click "Accept" in the image description. A third image of the brand image frame will be displayed on the last page.

What has been done:

All 3 groups of images are a list of images. Hence, I have grouped all of them into 3 different arrays, as:

var ImageMainMenu=["","","",....];
var ImageDescription=["","","",....];
var ImageBrandframe=["","","",....];

Secondly, I have randomised ImageMainMenu whenever a user enters the menu page. Thirdly, I have append the ImageDescription to each individual image in imageMainMenu. Lastly, I am stuck at calling the ImageBrandframe to each Image description.

var BrandNameArray = ["A", "B", "C", "D"];
var OfferArray = ["Aa", "Bb", "Cc", "Dd"];
var FrameArray = ["Aaa", "Bbb", "Ccc", "Ddd"];


var random_BrandIndex;
var random_BrandIndexArray = [];


$(function() {
  //To Set random Brand
  random_BrandIndexArray = [];

  //Re-create a randomised list of brands
  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];
    random_BrandIndexArray.push(Brand);
    BrandNameArray.splice(random_BrandIndex, 1);
    $('#Brand_' + (i + 1)).attr('src', Brand);
    $('#Brand_' + (i + 1)).show();
  }
  console.log(random_BrandIndexArray);
  BrandNameArray = BrandNameArrayBackup;
});
//Choose Brand with popUp
function selectBrand(index) {

  $('#BrandDescription').fadeIn({
    duration: slideDuration,
    queue: false
  });
  //To append offer array list to randomised Brand set

  var storedBrand = random_BrandIndexArray[index - 1];
  console.log("storedBrand: " + storedBrand);
  var selectedIndex = -1;
  for (i = 0; i < BrandNameArray.length; i++) {
    if (BrandNameArray[i] == storedBrand) {
      selectedIndex = i;
      break;
    }
  }

  var selectedOffer = OfferArray[selectedIndex];

  $("#Description").attr('src', selectedOffer);
  console.log("selectedOffer: " + selectedOffer);
  $("#Description").show();
}

function BrandDescription() {
  idleTime = 0;

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

function LikeBrand() {
  $('#BrandDescription').fadeOut({
    duration: slideDuration,
    queue: false
  });

  $('#Active_Camera').fadeIn({
    duration: slideDuration,
    queue: false,
    complete: function() {
      //To append offer array list to randomised Brand set

      var storedBrand = random_BrandIndexArray[index - 1];
      console.log("storedBrand: " + storedBrand);
      var selectedIndex = -1;
      for (i = 0; i < BrandNameArray.length; i++) {
        if (BrandNameArray[i] == storedBrand) {
          selectedIndex = i;
          break;
        }
      }

      var selectedFrame = FrameArray[selectedIndex];
      $("#Chosen_Photoframe").attr('src', selectedFrame);
      console.log("selectedOffer: " + selectedFrame);
      $("#Chosen_Photoframe").show();
    }
  });
  $("#CameraFeed").fadeIn({
    duration: slideDuration,
    queue: false
  });
}

<div id="ChooseBrand" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display:none; 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" 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');">
    </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:4px; z-index=99;">

</div>


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

  <!--Photoframe that is selected from brand chosen-->
  <img id="Chosen_Photoframe" style=" position:absolute; width:1920px; height:1080px; top:0px; left:0px;">
</div>

Issue: I have managed to get the image Description to display when user clicks on the individual imageBrand. However, when I click on accept in imageDescription, the imageBrand frame is having an issue.

I have tried using the same method as of function selectBrand(index). However, when run, it kept returning the error msg of : "uncaught referenceError: index is not defined". I am aware that in general the method to get the imageBrandframe is the same as the method to get the imageDescription in function selectBrand(index). however at this point, I am stuck as it is not calling due to error in index is not defined.

Please help. thank you.