How to update value from another page into Code.gs array list to be pass into spread sheet

Question

My google sheet updating column in my spreadsheet as undefined. This is fine when I just pass the argument directly to the append function without using an array.

col1        col2
undefined   undefined

What I'm expecting is.

col1    col2
image1  image3

main Code.gs

var list1=[];
var url1='https://docs.google.com/spreadsheets/d/19ltZN-Gc6G6WJF9tJ-GRPjdXczlpp0IKWU1yJLszBxI/edit#gid=0';
var ss=SpreadsheetApp.openByUrl(url1);
var ws=ss.getSheetByName("Data");


function page1(id){
  ws.appendRow(list1.push(id));
}

function page2(id){ 
list1.push([id]);
}

function lastPage(){
    ws.appendRow([list1[0],list1[1]]);
}

page1.html

<?var url = getScriptUrl();?><a href='<?=url?>?page=page2'>
      <img id="img4" onClick="imgClicked(this.alt)" alt="image4" src='https://lh3.googleusercontent.com/d/1gcuXbhSbVM9gSeffWgw_o1zHQ5PBvdaF=s220?authuser=0' width=200 height=200/>
      </a>
    </div>


        <script>

        function imgClicked(clicked){
        var id = clicked
        google.script.run.page1(id);
        }

        </script>

submit.html

   <?var url = getScriptUrl();?><a href='<?=url?>?page=page4'>
  <img id="img4" onClick="imgClicked()" alt="image4" src='https://lh3.googleusercontent.com/d/1gcuXbhSbVM9gSeffWgw_o1zHQ5PBvdaF=s220?authuser=0' width=200 height=200/>
  </a>
</div>

    <script>

    function imgClicked(){
    google.script.run.lastPage();
    }

    </script>

Answer 1

Change

function page1(id){
  ws.appendRow(list1.push(id));
}

to

function page1(id){
   list1.push(id);
  ws.appendRow(list1);
}

You will understand the reason if you log

Logger.log(list1.push(id));

See here :

Return value The new length property of the object upon which the method was called.

In other words, list1.push(id) returns you the length of the array rather than its content.