JSFiddle - React, Tailwind, and code Playground

by Brett Gaynor

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<ul></ul>

JavaScript

var textList = ['Elephant', 'Dog', 'Cat'];
var imgList = ['pic1.jpg', 'pic2.jpg', 'pic3.jpg'];

var randomImgIndexArr = generateUniqueIndexArray([], imgList);
var randomTextIndexArr = generateUniqueIndexArray([], textList);

function generateUniqueIndexArray(array, list) {
  while(array.length < list.length) {
      var randomIndex = Math.floor(Math.random() * list.length);
      if(array.indexOf(randomIndex) === -1) array.push(randomIndex);
  }
  
  return array;
}

  
textList.forEach(function(item, index) {
  var textStr = textList[randomTextIndexArr[index]];
  var image = imgList[randomImgIndexArr[index]];

  var li = $('<li/>');
  var aHref = $('<a/>', { href: textStr + '_' + image, text: textStr });
  var imgElm = $('<img/>', { src: image, id: image });

  $(li).append(aHref).append(imgElm).appendTo($('ul'));
});