Webpage using appScript: innerHTML assignment not working

Question

I have a simple WebApp application that reads the data from google sheet and displays in HTML using materialize css( 1.0.0), JS. I am new to this stack of tools. HTML page has 2 containers and bottom one supposed to be populated (using innerHTML assignment)based on the selection on the top container. The bottom container content is simple card contents in table format. I want to put a HTML Select object with List of values to be displayed and created a Appscript function. I am assigning the function output to innerHTML like this. -- JS

  function generateCards(text_card){
      document.getElementById("container-id").innerHTML += text_card;
  }

      function createAuthorCards(authorName) {
      document.getElementById("container-id").innerHTML = "";
      google.script.run.withSuccessHandler(generateCards).getCardDynamicText(authorName) ;

    }

-- If put copy/paste the function output in HTML it works( goes through rendering when refereshing), but if i use InnerHTML, the listbox is disabled, but all else seems ok. needed imageplease see the 2 attachments needed and missing_listbox images.enter image description here Is there any limitations of using innerHTML in webApp?

Answer 1

I was using google Webapp. It looks google doesn't allow the editing of dynamically created items. So I ended up using Modals to make the selections and save it.