JSFiddle - React, Tailwind, and code Playground

by TimOgilvy

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="lib/img/PAGE03/Background.png" />
  <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="width:284px; height:140px; top:0px; left:0px; border:0px; outline:0px" onclick="selectBrand('1');" data-brand="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"...

JavaScript

//Brand Array
var BrandNameArray = ["lib/img/PAGE03/Brands/anis.png", "lib/img/PAGE03/Brands/aeo.png", "lib/img/PAGE03/Brands/alo.png", "lib/img/PAGE03/Brands/beauty.png", "lib/img/PAGE03/Brands/bbe.png", "lib/img/PAGE03/Brands/eds.png", "lib/img/PAGE03/Brands/coch.png", "lib/img/PAGE03/Brands/cotnon.png", "lib/img/PAGE03/Brands/dewel.png", "lib/img/PAGE03/Brands/esdoir.png", "lib/img/PAGE03/Brands/erit.png", "lib/img/PAGE03/Brands/ethouse.png"];
//Corresponding Image Array
var OfferArray = ["lib/img/PAGE04/adonis.png", "lib/img/PAGE04/aeo.png", "lib/img/PAGE04/aldo.png", "lib/img/PAGE04/beauty.png", "lib/img/PAGE04/bebe.png", "lib/img/PAGE04/ceds.png", "lib/img/PAGE04/coach.png", "lib/img/PAGE04/cottonon.png", "lib/img/PAGE04/dejewel.png", "lib/img/PAGE04/esboudoir.png", "lib/img/PAGE04/esprit.png", "lib/img/PAGE04/etudehouse.png"];


//Choose Brand with popUp
function selectBrand(index) {
	console.log(index);

  $('#Vivo_BrandDescription').fadeIn({
    duration: slideDuration,
    queue: false
  });
  $("#All").hide();
  $("#Back").hide();
  $("#Beauty").hide();
  $("#Choose").hide();
  $("#Fashion").hide();

  var chosenBrandIndex = OfferArray[BrandNameArray];
  //Set option clicked to CSS change 
  $('#Description').attr('src', chosenBrandIndex);
  $('#Description').show();
}

function Vivo_BrandDescription() {
  idleTime = 0;

  $("#border_page").fadeOut(function() {
    $("#Vivo_BrandDescription").fadeIn();
  });
}

$(function() {
  
  $('#list img').on('click', function(){
  	console.log($(this).attr('onclick'));
  	console.log($(this).data('brand'));
    selectBrand($(this).data('brand'));
  })

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