Randomised image from array is displaying the wrong image in 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 BrandNameArray.splice(random_BrandIndex,1);.

Issue:

I have done a console log for the 2 image items that will be displayed within the image tag of my html body. However, when the 2 images are displayed, the 2nd image will sometimes display the wrong image.

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, C].

Could i please get some help on this. Thanks

I have attached the following code for your perusal.

var Brand_list = [];
var BrandNameArray = ["lib/img/Offer/Anson.png", "lib/img/Offer/CF.png", "lib/img/Offer/Chick.png", "lib/img/Offer/Fish.png", "lib/img/Offer/Food.png"];


//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];

  //To prevent the images from displaying twice
  BrandNameArray.splice(random_BrandIndex, 1);

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

<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>