Randomised Image in array is displaying wronged for image tag

functionality:

I have set 2 image tags in my html body to be displaying 2 randomised images from an array. Secondly, I have ensured that the 2 displayed randomised images will not repeat itself via the code line var Brand = BrandNameArray.splice(random_BrandIndex, 1)[0];

However, when I do run the code, I have noticed that the second image for the 2nd image tag in the html body is displaying the wrong image. It is displaying an image index of +1.

Meaning:

I have an array_Image = [A, B, C, D, E] and within my console log, it is stated that the randomised image returns 2 images of [0,3], hence rightfully, it should be showing image [A , D] in my image tag of my html body. However, the images that are displayed are [A, E]. The following behaviour has occured quite a number of times even though, it is not consistent.

Could i please get some help on this. Thanks.

I have attached the following code for your perusal.

The following code of onclick="selectBrand('2'); is called when user clicks on the displayed randomised generated image, will display a popup image that is also from another array that is appended to Brand_list.push(random_BrandIndex);, depending on the image that is being pushed to the temporary store array -> var Brand_List=[];

 //Brand Offers
 var Brand_list = [];

 var BrandNameArray = ["lib/img/Brands/Anderson.png", "lib/img/Brands/ChalkFarm.png", "lib/img/Brands/ChickenUp.png", "lib/img/Brands/FishMartSakuraya.png", "lib/img/Brands/HoneyWorld.png"];






 //Randomised Brand Offer
 //Auto populate into brand container once randomised
 $('#BrandWinlist > img').each(function(i, img) {

   random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
   console.log("random_BrandIndex:" + random_BrandIndex);

   //Assign Variable to generate random Brands
   //var Brand = BrandNameArray[random_BrandIndex];
   console.log("Brand:" + Brand);


   var Brand = BrandNameArray.splice(random_BrandIndex, 1)[0];

   Brand_list.push(random_BrandIndex);

   $(img).attr('src', Brand).show();
 });

 console.log("Brand_list:" + "[" + Brand_list + "]");

<div id="MainBackground" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; z-index=8; top:0px; left:0px; margin:auto;">


  <!--Div to show my 2 randomised images-->
  <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>


</div>