Unable to append second image from array B to html img tag

I have 2 arrays of elements:

Array A = ["lib/img/band/A.png", "lib/img/band/B.png", "lib/img/band/C.png"]; 

and

ArrayB = ["lib/img/secondary/A1.png", "lib/img/secondary/B1.png", "lib/img/secondary/C1.png"];

I have managed to randomised Array A and append all randomised image to 2 img tag. Hence, on document.getready(), the img container will be showing 2 randomised elements.

When user clicks on one of the generated randomised image shown from Array A, in the image tag. The corresponding image from Array B will be displayed in a pop-u, meaning when image A= lib/img/band/A.png is clicked/selected, the second image from image B= lib/img/secondary/A1.png will be shown.

Issue: However, at this point in the html body, there are 2 randomly generated images and when i clicked on the second image from array A, it does show the correct secondary image from array B, meaning: the page is showing 2 randomly generated image: 1.)"lib/img/band/B.png" 2.) "lib/img/band/A.png". There when I clicked on 2.) "lib/img/band/A.png", it is showing b.) "lib/img/secondary/A1.png". However, when I clicked on 1.)"lib/img/band/B.png", it is still showing a.) "lib/img/secondary/A1.png" when it should be showing a.) "lib/img/secondary/B1.png"

I have console log and it is showing the secondary image from arrayB when I clicked on the second image but the console.log is showing the wrong secdonary image from array B when i click on the first image. vice versa.

Therefore, I would need to ask what is missing. I really have no idea how to continue. please help. thanks.

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/A1.png", "lib/img/Offer/B1.png", "lib/img/Offer/C1.png", "lib/img/Offer/D1.png"];

var random_BrandIndex, selectedOffer;

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").attr('src', selectedOffer).show();
}

.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;
}

<!--Randomly generated images where it allows user to click for the second image to pop-up as P_Description-->
<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>


<!--Second image will pop-up that corresponds with the random image clicked above-->
<div id="P_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" class="BrandDescription" style="position:absolute; width: 1080px; height:762px; top:500px; left:0px; z-index=99;">
</div>