How to display values from google script object in html <p>?

Question

HTML code

I want to display object values in this form in <p or easier solutions

<div class="control-form-id">
  <label for="id">Id:</label>
  <input type="text" name="id" id="id" required>
  <button type="button" onclick="JSinHTML();" id="search" >Search</button>
</div>

<div class="serial">
  <label for="serial">Serial number:</label>
  <p id="serial">result</p>
</div>

<script>
  function JSinHTML(){
     let id_form ={}
  id_form.input = document.getElementById("id").value
  alert(id_form.input);
  google.script.run.main(id_form);
  document.getElementById("id").value = "";
} 
               
                  
</script>

GOOGLE SCRIPT code

function findId returns row number by typed id

function main(JSinHtml){
    let numberRow = findId(JSinHtml.input); 
    Logger.log("input in main " + JSinHtml.input);
    let toHtml = {};
    toHtml.id = sheet_spis.getRange(numberRow, column_id).getValue();
    toHtml.serial_number = sheet_spis.getRange(numberRow, column_serialnr).getValue();
    toHtml.size = sheet_spis.getRange(numberRow, column_size).getValue();
    toHtml.type = sheet_spis.getRange(numberRow, column_type).getValue();
    Logger.log(toHtml); //I want to display separately this values in few <p>
}

Answer 1

I believe I have circumvented the problem by downloading and uploading data year-wise (eg https://www.datafiles.samhsa.gov/dataset/national-survey-drug-use-and-health-2020-nsduh-2020-ds0001 for 2020)