Randomised Image is displayed more than once

Functionality:

Brand image is randomised and is displayed within the container list. Each of the randomised brand image needs to be only displayed once.

What has been done:

Firstly, I have created an array of image files as var ImageArray=["","","",....]. Secondly, I have created a randomised method as var random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length); and lastly, I created a for loop that will allow the image to populate the table created within the html body.

I have attached the code for your perusal:

//Brand Array
var BrandNameArray = ["lib/img/PAGE03/Brands/Ads.png", "lib/img/PAGE03/Brands/AEO.png", "lib/img/PAGE03/Brands/AO.png", "lib/img/PAGE03/Brands/Beauty.png", "lib/img/PAGE03/Brands/Be.png", "lib/img/PAGE03/Brands/DS.png", "lib/img/PAGE03/Brands/Cch.png", "lib/img/PAGE03/Brands/Coton.png", "lib/img/PAGE03/Brands/Dwel.png", "lib/img/PAGE03/Brands/esBr.png", "lib/img/PAGE03/Brands/Et.png", "lib/img/PAGE03/Brands/E.png"];

$(function() {
  //Auto populate into brand container once randomised for each Brand image
  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];
    $('#Brand_' + (i + 1)).attr('src', Brand);
    $('#Brand_' + (i + 1)).show();
    console.log(Brand);
  }
});

.Container {
  position: absolute;
  top: 300px;
  left: 300px;
  height: 600px;
  width: 1250px;
  overflow-y: scroll;
}
.innerScroll {
  position: relative;
  width: 1250px;
  height: 600px;
  font-size: 25px;
  color: #8d8989 !important;
  overflow: scroll;
}

<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');">

    <!--2nd Row-->
    <img id="Brand_5" style="width:284px; height:140px; top:140px; left:0px; border:0px;" onclick="selectBrand('5');">
    <img id="Brand_6" style="width:284px; height:140px; top:140px; left:330px; border:0px;" onclick="selectBrand('6');">
    <img id="Brand_7" style="width:284px; height:140px; top:140px; left:650px; border:0px;" onclick="selectBrand('7');">
    <img id="Brand_8" style="width:284px; height:140px; top:140px; left:965px; border:0px;" onclick="selectBrand('8');">

    <!--3rd Row-->
    <img id="Brand_9" style="width:284px; height:140px; top:280px; left:0px; border:0px;" onclick="selectBrand('9');">
    <img id="Brand_10" style="width:284px; height:140px; top:280px; left:330px; border:0px;" onclick="selectBrand('10');">
    <img id="Brand_11" style="width:284px; height:140px; top:280px; left:650px; border:0px;" onclick="selectBrand('11');">
    <img id="Brand_12" style="width:284px; height:140px; top:280px; left:965px; border:0px;" onclick="selectBrand('12');">

    <!--4th Row-->
    <img id="Brand_09" style="width:284px; height:140px; top:280px; left:0px; border:0px;" onclick="selectBrand('9');">
    <img id="Brand_10" style="width:284px; height:140px; top:280px; left:330px; border:0px;" onclick="selectBrand('10');">
    <img id="Brand_11" style="width:284px; height:140px; top:280px; left:650px; border:0px;" onclick="selectBrand('11');">
    <img id="Brand_12" style="width:284px; height:140px; top:280px; left:965px; border:0px;" onclick="selectBrand('12');">.....(more rows of images)...
  </div>
</div>

Issue:

At this point in time, the randomised images are displaying. However, some of the images displayed are displayed more than once.

Therefore, How is it possible for the randomised image to be only displayed once within the <div id ="list">?

please help. your help is much much appreciated.