JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ChooseBrand" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; z-index=3; top:0px; left:0px;">
  <img id="Main" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" height="100px" width="150px"/>
  <input type="text" id="SearchField" style="position:absolute; top:190px; left:660px; height:40px; width:600px; outline=0px; border: 0; font-size:25px; font-family:'CenturyGothic'; background: transparent; z-index=4;" autofocus src="lib/img/transparent.png">
  <div class="Container">
    <div id="list" class="innerScroll">
      <!--1st Row-->
      <img id="Brand_1" style="top:0px; left:0px;">
      <img id="Brand_2" style="top:0px; left:330px;">
      <img id="Brand_3" style="top:0px; left:650px;">
      <img id="Brand_4" style="top:0px; left:965px;">

      <!--2nd Row-->
      <img id="Brand_5" style="top:140px; left:0px;">
      <img id="Brand_6" style="top:140px; left:330px;">
      <img id="Brand_7" style="top:140px; left:650px;">
      <img id="Brand_8" style="top:140px; left:965px;">

      <!--3rd Row-->
      <img id="Brand_9" style="top:280px; left:0px;">
      <img id="Brand_10" style="top:280px; left:330px;">
      <img id="Brand_11" style="top:280px; left:650px;">
      <img id="Brand_12" style="top:280px; left:965px;">
    </div>
  </div>
</div>

<div id="BrandDescription" class="menu" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display:none; top:0px; left:0px; z-index=4;">

  <img id="Description" style="position:absolute; top:0px; left:0px;z-index=5;">

</div>

CSS

#list > img{
  width:284px;
  height:140px;
  border: 0px;
  outline: 0px;
}
.menu {
  background-color: #FFFFFF;
  filter: alpha(opacity=90);
  opacity: 0.98;
}
.Container {
  position: absolute;
  top: 300px;
  left: 300px;
  height: 600px;
  width: 1260px;
  overflow-y: scroll;
}
.innerScroll {
  position: relative;
  width: 1250px;
  height: 600px;
  font-size: 25px;
  color: #8d8989 !important;
  overflow: scroll;
}

JavaScript

//Brand Array
var ran = 1;
var BrandNameArray = ["http://loremflickr.com/g/320/240/paris,girl/all?"+new Date().getTime()+ran, "http://loremflickr.com/g/320/240/paris,girl/all?"+new Date().getTime()+(++ran), "http://loremflickr.com/g/320/240/paris,girl/all?"+new Date().getTime()+(++ran), "http://loremflickr.com/g/320/240/paris,girl/all?"+new Date().getTime()+(++ran), "http://loremflickr.com/g/320/240/paris,girl/all?"+new Date().getTime()+(++ran), "http://loremflickr.com/g/320/240/paris,girl/all?"+new Date().getTime()+(++ran), "http://loremflickr.com/g/320/240/paris,girl/all?"+new Date().getTime()+(++ran), "http://loremflickr.com/g/320/240/paris,girl/all?"+new Date().getTime()+(++ran), "http://loremflickr.com/g/320/240/paris,girl/all?"+new Date().getTime()+(++ran), "http://loremflickr.com/g/320/240/paris,girl/all?"+new Date().getTime()+(++ran), "http://loremflickr.com/g/320/240/paris,girl/all?"+new Date().getTime()+(++ran), "http://loremflickr.com/g/320/240/paris,girl/all?"+new Date().getTime()+(++ran)];
//Corresponding Image Array
var OfferArray = JSON.parse(JSON.stringify(BrandNameArray));

$(function() {

  //Auto populate into brand container once randomised for each Brand image
  var BrandNameArrayBackup = JSON.parse(JSON.stringify(BrandNameArray));
  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];
    BrandNameArray.splice(random_BrandIndex, 1);
    $('#Brand_' + (i + 1)).attr('src', Brand);
    $('#Brand_' + (i + 1)).show();
    console.log(Brand);
  }
  BrandNameArray = BrandNameArrayBackup; //re-assigning values back to array
});

//Choose Brand with popUp
function selectBrand(index) {
	console.log('inside select brand '+index);
  var slideDuration = 2000;
  $('#BrandDescription').fadeIn({
    duration: slideDuration,
    queue: false
  });
 ...