How does the browser 'know' the order? It keeps track in a CSS property, z‑index. Fortunately we can alter that property at any time but we'll need to keep track of the values used. I use a global variable g_z initialised to 50.
This is used in draw() as follows:

function draw() {
  for (var c=1;c<9;c++) {
    var ids=g_main_cols[c];
    for (var i=0;i<ids.length;i++) {
      var id=ids[i]; var r=i+1;
      var el=document.getElementById(id);
      el.style.gridRowStart=r;
      el.style.gridColumnStart=c;
      el.style.zIndex=g_z; g_z++;
    }
  }
}
Moving on

We're now ready to respond to the player clicking a card.
It's like so many previous projects:

  1. if it's the first click - remember the click and highlight the card;
  2. if it's the second click:
    • drop the highlight;
    • if it's the same as the first click,
        forget the remembered card and go to step 1;
    • else process the two clicks;
    • forget the remembered card and go to step 1;

We'll need a global variable g_click_card initialised to -1 for 'remembering' the first click and a highlight class.

.highlight {
  outline:1vmin solid lightgreen;
}