Update image button src onclick for subsequent trials

I’m coding an experiment with a 12×12 grid of image buttons in jsPsych. Participants receive feedback based on which squares they choose to click. These squares are all initially white (white squares are saved as an img file called “old”) but after a square has been clicked I want it to turn grey (saved as an img file called “new”) for all subsequent trials (100 total). To do this, I’ve been trying to get the src of a button to update after it has been clicked. I’m relatively new to coding so any help would be greatly appreciated, thank you!

I was able to change the image on an individual trial. Usually the trial would end upon click, so I turned that off and was able to see the square change to grey after it was clicked. However, all the squares revert back to white for the next trial.

var squares = new Array(144); 
    for (var t = 0; t < squares.length; t++) {   
        squares[t] = t;
    };

   var responseGrid = {    
        type: jsPsychHtmlButtonResponseGridFeedback, // plugin arranges buttons in 12 x 12 grid
        stimulus: [], 
        prompt: "<p>Please select a key</p>",
        choices: squares,
        button_html: '<button class= "jspsych-btn-grid" style = "display: grid" onclick = "color(this)"><img id="%choice%" src="imgRareEnvironment/%choice%-old.jpg"></button>', 
        image_size: 100,
        response_ends_trial: false,
        trial_duration: 6000,
        on_finish: function(data){
            i = i + 1;
            data.i = i;
            var lastSquare = data.response;
            clickedSquares.push(data.response);
        },
    };

    function color(el){  
    var img_id = el.querySelector('img').id;  
    var img_el = document.getElementById(img_id); 
    img_el.src = img_el.src.replace("old","new");
    };

To try and fix this so the colour change carried over for all future trials, I made the button_html a function and included an on_finish function that goes through all the squares and updates them to grey if they are included in the “clicked squares” array. However, this gives an error “Uncaught TypeError: Cannot set properties of null (setting ‘src’)”. I’m not sure why it can’t find the images to update the src, or if there’s a better way to go about this.

 var responseGrid = {    
    type: jsPsychHtmlButtonResponseGridFeedback,
    stimulus: [], 
    prompt: "<p>Please select a key</p>",
    choices: squares,
    button_html: function(choice) {
      var button_html = '';
      var choice = '%choice%';
      var id = 'square-' + choice;
      var src = "imgRareEnvironment/" + choice + "-old.jpg"; 
      button_html += '<button class="jspsych-btn-grid" style="display: grid"><img id="' + id + '" src="' + src + '"></button>';
      return button_html;
    },
    image_size: 100,
    on_finish: function(data){
        i = i + 1;
        data.i = i;
        var lastSquare = data.response;
        clickedSquares.push(lastSquare);
        for (let t = 0; t < 144; t++) {
          let image = document.getElementById('square-' + t);
          if (clickedSquares.includes(t)) { 
            image.src = "imgRareEnvironment/" + t + "-new.jpg";
          }
        }
    },
    };