So, on the .flex container, every time you add the output on the innerHTML, it would essentially re-run the 'evaluation' of the square brackets, which would also update the container - which updates the previous images. Best way is to not alter the InnerHTML by concatenating and use .appendChild instead. Ex:

  function addImageRow() {
    let con = document.createElement('div');
    con.innerHTML = output
    document.querySelector(".flex").appendChild(con);
  }

But since this wouldn't have any square brackets, you cannot use the regular update() function to reload them. Here's a function to update them:

function updateRows() {
    let numRows = document.querySelector(".flex").querySelectorAll('div').length
    document.querySelector(".flex").innerHTML = ''
    for (let i = 0; i < numRows; i++) {
      let con = document.createElement('div');
      con.innerHTML = output
      document.querySelector(".flex").appendChild(con);
    }
  }