Every month Chase offers rewards on their credit cards through different stores. There are like 70 offers and clicking into each one is a pain in the butt. I'm trying to find a way to automate this with a script in the DevTools console or using a DevTools snippet. Problem is, I'm not much of a JS engineer.

What I'm trying to do is use a script to "click" on one of the offers. Then, a right slider pops up with info about the offer. I then would like to "click" the X button to close that slider, then go to the next offer. I've tried a bunch of different variations of code that just don't seem to work. I'm having a hard time grokking how to make Promises work. I have also tried setTimeouts in a bunch of different places with a bunch of different times.

I've included the images to show the layout and the classes I'm trying to select.

Latest Attempt (at this point I'd given up)

async function taskOne(i, thisObj) {
    $(thisObj).click().delay(1000);
    $("#flyoutCloseIcon").click();
}

async function clickDeal() {
    $(".iconAddToCard").each(async function(i) { 
        await taskOne(i, $(this));
    });
}

async function main() {
    await clickDeal();
}

main();

Another Failed Attempt

$(".iconAddToCard").on('click', function (event){
    console.log("click card");
    event.stopPropagation();
});

$(".flyoutCloseIcon").on('click', function (event){
    console.log("click X");
    event.stopPropagation();
});


function taskOne(i, this_obj) {
  setTimeout(function() {
      $(this_obj).click();
  }, 1000 * i);
   setTimeout(function() {
      $("#flyoutCloseIcon").click();
  }, 3000 * i);
}


var arrLength = $(".iconAddToCard").length;
var count = 1;

function myLoop() {         
  setTimeout(function() {   
    console.log('hello');
    count++;
    if (count < arrLength) {       
        $(".iconAddToCard").each(function(i) { 
          taskOne(i, $(this));
          myLoop();
        })
    }
  }, 6000 * count)
}

myLoop();

Chase offer Side slider