Trying to "highlight" or change opacity of divs in Simon game

Question

I am new to coding and am building a Simon game using jQuery. I was able to figure out the functionality to display in the console and generate random sequences. I am stuck with trying to get each of the divs to "light up" to follow the array, and to be able to have them light up when the user clicks on them. I'm starting to think that my entire code is off...

Here is my HTML:

        <a class="trigger_popup_fricc">Need Instructions?</a>

    <div class="hover_bkgr_fricc">
        <span class="helper"></span>
        <div>
            <div class="popupCloseButton">X</div>
            <p>Simon will generate a pattern from the four squares on the screen. To win the game, all you have to do is repeat the pattern! The further along you get, the longer the sequences will become! Ready? Click on "Begin!" to put your skills to the test.</p>
        </div>
    </div>

    <button type="button">Begin!</button>

<div class="column">
  <div class="row">
    <div class="square one" id="blue"></div>
    <div class="square two" id="purple"></div>
  </div>

  <div class="row">
    <div class="square three" id="pink"></div>
    <div class="square four" id="green"></div>
  </div>
</div>



  </body>
</html>

And here is my jQuery

$(function () {


$(".trigger_popup_fricc").click(function(){
  $('.hover_bkgr_fricc').show();
});
$('.hover_bkgr_fricc').click(function(){
  $('hover_bkgr_fricc').hide();
});
$('.popupCloseButton').click(function(){
  $('.hover_bkgr_fricc').hide();
});


//create logic for removing instructios when 'begin' is clicked
//add logic to change the button to a 'start over' or 'give up' buttons
//when the 'give up' button is cliked, start game from the beginning
//also alert user that they have 'lost'
// https://stackoverflow.com/questions/15543482/change-the-buttons-function-with-jquery
$('button').click('click', firstClick)
  function firstClick () {
    $('.trigger_popup_fricc').fadeOut("slow");
    $(this).text("Give Up?");
    $('button').on('click', secondClick)
  }

function secondClick () {
  location.reload();
  alert("Better luck next time!");
};


$(document).ready(function(){
  $('#blue').click(function(){simon.addColor(blue)});
  $('#purple').click(function(){simon.addColor(purple)});
  $('#pink').click(function(){simon.addColor(pink)});
  $('#green').click(function(){simon.addColor(green)});
});

const blue = "blue";
const purple = "purple";
const pink = "pink";
const green = "green";

//https://www.youtube.com/watch?time_continue=1&v=_r6B369ZTsc
let simon = {
  simonSequence: [],
  pads: ["blue", "purple", "pink", "green"],
  turn: 0,
  //create the function for the sequence
  addColor: function (color) {
    if(simon.simonSequence.length === 0) {
      //calls the next color to be random
      simon.nextSequence();
    } else {
      if (color === simon.simonSequence[simon.turn]) {
        if (simon.turn === simon.simonSequence.length -1) {
          console.log("good job");
          simon.nextSequence();
          //calling below function
          simon.turn=0;
        } else {
          simon.turn++;
        }
      } else {
        alert ("Wrong move! Game over!");
        //if user gueses incorrectly, the game will reset
        location.reload();
      }
    }
  },

  nextSequence: function () {
    let nextColor = simon.pads[Math.floor(Math.random() *4)];
    simon.simonSequence.push(nextColor);

    }
    //add .css to change opacity of array as selected
    console.log("the sequence", simon.simonSequence)


  }
};

});