Random JavaScript Select code fix

I have this js code

var img = {
  blue: '<img src="http://ift.tt/2jUVVNM"/>',
  purple: '<i class="fa fa-money moneyx" aria-hidden="true"></i><span class="money2"> 0.20</span>',
  pink: '<img src="http://ift.tt/2ikKzlI"/>',
  red: '<img src="http://ift.tt/2jRWBTP"/>',
  yellow: '<img src="http://ift.tt/2ikKzSK"/>'
}

function reset(){
  $('.card').remove();
  for (var i = 0; i < 210; i++){
    var element = '<div class="card" style="background-color: lightblue;" data-rarity="PUBG" id=itemNumber'+i+'>'+img.blue+'</div>';
    var rand = random(1,10000)/100;
    if (rand < 30){
      element = '<div class="card" style="background-color: #181b1c; margin-left: 1px; margin-right: -2px; top: -5px;" data-rarity="+$0.20 instead of" id=itemNumber'+i+'>'+img.purple+'</div>';
    }
    if (rand < 5){
      element = '<div class="card" style="background-color: hotpink;" data-rarity="pink" id=itemNumber'+i+'>'+img.pink+'</div>';
    }
    if (rand < 2){
      element = '<div class="card" style="background-color: red;" data-rarity="red" id=itemNumber'+i+'>'+img.red+'</div>';
    }
    if (rand < 0.5){
      element = '<div class="card" style="background-color: yellow;" data-rarity="yellow" id=itemNumber'+i+'>'+img.yellow+'</div>';
    }

    $('#cardList').append(element);
  }
  
}

function openCase(){
  reset();
  var rand = random(1000,20000);
  var childNumber = Math.floor(rand/100)+4;
  //var timings = ["easeInOutBack","easeOutExpo","easeInOutBounce","easeOutQuad","swing","easeOutElastic","easeInOutElastic"];
  var timings = ["swing"];
  var timing = timings[random(0,timings.length)];
  var reward = $('#itemNumber'+childNumber).attr('data-rarity');
  

  
  $('.card').first().animate({
    marginLeft: -rand
  }, 5000, timing, function(){
    
    var src = $('#itemNumber'+childNumber+' img').attr('src');
    $('#itemNumber'+childNumber).css({background: "linear-gradient(#00bf09, #246b27)"});
    
    $('#dialog-msg').html("You have received "+reward+" game!"+"<br><img src="+src+">");
    
   
    
    
    $('#dialog').dialog({
      modal: true,
      title: "New item!",
      resizeable: false,
      draggable: false,
      width: 400,
      buttons: {
        "Receive item":function(){
          $(this).dialog("close");
          // add resources
        }
      }
    });
  });
  
  
  //$('.card').css({backgroundColor: 'red'})
  //$('.card:nth-child('+(childNumber+1)+')').css({backgroundColor: 'green'})
}

function random(min, max){
  return Math.floor((Math.random()*(max - min))+min);
}

This code is made to random select one image and show it up

I need help with the following question: For example when the script choose and show the 'red' image how can I add an additional text or code only when that image is selected.

I have tried to make this by myself but it seems impossible to me, I am new in this domain.