setValues from HTML dynamic table to SheetByName

Question

I am building an automated solution on Google Apps Scripts for my job that is testing my basic knowledge of HTML and JS. I would appreciate some guidance.

Context:

• I am building a tool to automate certain tasks on Google Sheets through formulas and scripts
• The task I'm having issues with begins with the user clicking on a button that opens a getUi() Modal Dialog
• The main challenge is to extract data out of an HTLM table where the user makes inputs

JS code triggering the popup (just for context):

function openbrief() {
  //pull necessary values
  var supp_main = SpreadsheetApp.getActive().getSheetByName('supp_main')

  //projects
  var projrng = supp_main.getRange(2, 64, 1000);
  var projval = projrng.getValues();
  var projname = projval.filter(String)
  
  //content_category
  var catrng = supp_main.getRange(2, 65, 1000);
  var catval = catrng.getValues();
  var catname = catval.filter(String)

  //content_type
  var typerng = supp_main.getRange(2, 66, 1000);
  var typeval = typerng.getValues();
  var typename = typeval.filter(String)

  //format
  var formatrng = supp_main.getRange(2, 67, 1000);
  var formatval = formatrng.getValues();
  var formatname = formatval.filter(String)
  
  //channel
  var chanrng = supp_main.getRange(2, 68, 1000);
  var chanval = chanrng.getValues();
  var channame = chanval.filter(String)


  var widget = HtmlService.createTemplateFromFile('briefs');
  widget.projdata = projname.reduce((s, [e]) => s += `<option value="${e}">${e}<\/option>\n`, "");
  widget.catdata = catname.reduce((s, [e]) => s += `<option value="${e}">${e}<\/option>\n`, ""); 
  widget.typedata = typename.reduce((s, [e]) => s += `<option value="${e}">${e}<\/option>\n`, "");
  widget.formatdata = formatname.reduce((s, [e]) => s += `<option value="${e}">${e}<\/option>\n`, ""); 
  widget.chandata = channame.reduce((s, [e]) => s += `<option value="${e}">${e}<\/option>\n`, "");
  SpreadsheetApp.getUi().showModalDialog(widget.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).setHeight(5000).setWidth(5000), 'Briefs');

}

Questions:

1. I have a GS/JS script within the HTML that is supposed to run through the table values, push them to an array and paste them to a gSheet. However it does not do that. I'm not experience with for loops and arrays on JS, and I can't tell what's not working.
2. Will this type of script pull the values from the dropdown menus? I suspect it won't as they seem to be sitting on top of the cell. But I'm unsure (see screenshot for more context)
3. Any other improvements or suggestions based on both code or screenshot is very welcome

References:

• The script is "inspired" by this: Getting value from table cell in JavaScript...not jQuery
• Here's another case I've been browsing but I fail to understand the solution provided: extract value from dynamic html table

HTML code

<table id="brief_table">
      <thead>
          <tr>
              <th>Content category</th>
              <th>Description</th>
              <th>Content type</th>
              <th>Format</th>
              <th>Channel</th>
              <th>Assets</th>
              <th>Start date</th>
              <th>End date</th>
              <th>Relevant links</th>
              <th>Comments</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>
                <select id="catname" style="Border: none;"><?!= catdata ?></select>
              </td>
              <td contenteditable='true'>Test</td>
              <td>
                <select id="typename" style="Border: none;"><?!= typedata ?></select>
              </td>
              <td>
                <select id="formatname" style="Border: none;"><?!= formatdata ?></select>
              </td>
              <td>
                <select id="channame" style="Border: none;"><?!= chandata ?></select>
              </td>
              <td contenteditable='true'>Test</td>
              <td contenteditable='true'>Test</td>
              <td contenteditable='true'>Test</td>
              <td contenteditable='true'>Test</td>
              <td contenteditable='true'>Test</td>
          </tr>
      </tbody>
</table>

<script>
function pasteBrief() {
  var table = document.getElementById("brief_table");
  var tablevalues = [];

  for (var r = 0, n = table.rows.length; r < n; r++) {
          for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
              tablevalues.push(table.rows[r].cells[c].innerHTML);
          }
      }

  alert(tablevalues);
  google.script.run.pasteBriefVal(tablevalues);
}
</script>

GS SERVER CODE

function pasteBriefVal(tablevalues){
  SpreadsheetApp.getActive().getSheetByName('supp_main').getRange('bs1:cb').setValues(tablevalues);
}

Screenshots:

Additional info:

• I have managed to stringify the array, which in return allow me to paste it as a value in one single cell. This enable me to take a closer look to it (see img below)
• Link to copy of the spreadsheet: link - to trigger the popup "briefs.html" you want to go to "[SOW] #2-Project & deliverables" and click on the icon that says "PLAN" around D24

Edits:

• Moved setValues out of HTML file back to GS side. Called the new GS function out from HTML via google.script.run.pasteBriefVal(tablevalues)
• Added more information on what the array look like
• Added the link to a copy of the original spreadsheet should anyone want to take a deeper look

Answer 1

Server side GS and Client side JS

The below server side code does not run in a browser: SpreadsheetApp.getActive().getSheetByName('supp_main').getRange('bs1').setValues(tablevalues);

If you wish to run server side code the use google.script.run