Not able to append element

I have set 2 image container that shows 2 randomly generated image from an array of elements. When user clicks on either of the 2 randomly generated images, an image pop-up will appear. This generated image pop-up; from a second array of image, is in relation to what random generated image that has been displayed.

Therefore, this is the right behaviour: - random generated image A and image B is shown in the page 1, when user click on image A, image pop-up A1 will be shown else image B1 will be shown when image B is clicked.

Issue:

I have managed to achieve the following:

1.) randomly generate 2 images from array A and append it to the initial 2 image container

2.) link array B to items generated in array A

I have set out a console log and was able to see that the element from the 2nd array element is correctly called when i select the randomly generated image from array A

However, at this point in time, I am unable to append the item from array B to the image pop-up in my html body..

Please help

Here is the code:

var BrandNameArray = ["lib/img/Brands/A.png", "lib/img/Brands/B.png", "lib/img/Brands/C.png", "lib/img/Brands/D.png"];

var OfferArray = ["lib/img/Offer/A.png", "lib/img/Offer/B.png", "lib/img/Offer/C.png", "lib/img/Offer/D.png"];

function ShowInitialBrand() {
  $('#BrandWinlist > img').each(function(i, img) {
    random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
    //Assign Variable to generate random Brands
    var Brand = BrandNameArray.splice(random_BrandIndex, 1)[0];
    $(img).attr('src', Brand).show();
  });
}

function selectBrand(flag) {
  selectedOffer = OfferArray[random_BrandIndex];

  console.log("selectedOffer: " + selectedOffer);

  $("#P_Description").html(selectedOffer);
}

.GameWinBrand_Container {
  position: absolute;
  top: 950px;
  left: 286px;
  height: 250px;
  width: 500px;
  overflow: hidden;
}
.GameWinBrand_innerScroll {
  position: relative;
  width: 480px;
  font-size: 30px;
  text-align: justify;
  color: #ffffff !important;
  overflow: hidden;
}
.GameWinBrand_Container::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  background-color: #ffffff;
}
.GameWinBrand_Container::-webkit-scrollbar {
  width: 12px;
  background-color: #5e5767;
}
.GameWinBrand_Container::-webkit-scrollbar-thumb {
  border-radius: 20px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #5e5767;
}
.BrandMenu {
  background-color: #FFFFFF;
  filter: alpha(opacity=80);
  opacity: 0.8;
}

<!-- The first page where 2 randomly generated images are shown-->
<div class="GameWinBrand_Container">
  <div id="BrandWinlist" class="GameWinBrand_innerScroll">
    <img id="GameBrand_1" style="width:230px; height:230px; top:0px; left:0px; border:0px; outline:0px" onclick="selectBrand('1');">
    <img id="GameBrand_2" style="width:230px; height:230px; top:0px; left:330px; border:0px;" onclick="selectBrand('2');">
  </div>
</div>

<!-- The second page that will show the image in relation to the image that has been clicked-->

<div id="BrandDescription" class="BrandMenu" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=9; top:0px; margin:auto;">
  <img id="P_Description" style="position:absolute; width: 1080px; height:762px; top:500px; left:0px; z-index=99;">

</div>