How to replace old html elements with new html elements dynamically

1. Summarize the problem, Include details about your goal

My goal of this project is to dynamically generate new html inputs when a user clicks a button. When the generate_html button is clicked a set of html elements are created. The elements are key and descriptions for a word matching exercise.

                    <div class="row">
                      Key Term 1: <input id="el1" type="text" value="">
                    </div>
                    <div class="row">
                      Description 1: <input id="dl1" type="text" value="">
                    </div>

When the user clicks a button the following javascript method is called

function process_input() {
      const e_inputs = document.querySelectorAll("[id^='el']");
      const d_inputs = document.querySelectorAll("[id^='dl']");
      const title = document.getElementById('title_input').value;
      let elArray = [];
      let dlArray = [];
      e_inputs.forEach( i => { if(i.value) elArray.push(i.value) });
      d_inputs.forEach( i => { if(i.value) dlArray.push(i.value) });
      generate_html(elArray, dlArray, title);
    }

The generate_html method is constructed like so

const generate_html = (elArray, dlArray, title) => {
      let text = title + "\n";
      for (let i = 0; i < elArray.length; i++) {
          text += `${elArray[i]}:${dlArray[i]}\n`;
      }
      console.log(text);

      //fetch the results box
      word_matching = document.getElementById("results");
      
      //has the html already been generated? 
      if(!htmlGenerated){
        word_matching.innerHTML = ""
        console.log("generating textarea");
        //create textarea
        word_matching.innerHTML += '<textarea id="html" value="';

        //create key inputs
        for (let i = 0; i < elArray.length; i++){
          word_matching.innerHTML += '<div\s id="s'+i+'"class="draggyBox-small">'+elArray[i]+'</div>\n' 
          console.log('<div\s id="s'+i+'"class="draggyBox-small">'+elArray[i]+'</div>\n');
        }
  
        //create description inputs
        for (let i = 0; i < dlArray.length; i++){
          word_matching.innerHTML += '<table id="tablestyle"><td >\n \t\t<div\s id="t'+i+'"class="ltarget"></div>\n \t</td >\n \t<td \s id="d2">'+dlArray[i]+'</td >\n </tr>\n</table>'
          console.log('<table id="tablestyle"><td >\n \t\t<div\s id="t'+i+'"class="ltarget"></div>\n \t</td >\n \t<td \s id="d2">'+dlArray[i]+'</td >\n </tr>\n</table>');
        }

        
        word_matching.innerHTML += '<div id = "program1" style="border: 1px solid #EB0D1B; width: 360px; font-family: courier; font-size: 100.5%; margin: 0px auto; border: 1px; text-align: center; margin-top: 5px;"> <span style="padding: 3px"> <button id ="one" class="button" type="button" onClick="one()">Show Answer</button> <button id = "resetButton" class="button" type="button" onClick="reset()">Reset</button><button id = "renderHTMLButton" class="button" type="button" onClick="render_html()">Render html</button> <span id = "audio" style=""> <a href="" title="Turns Text-to-Speech Output On or Off" class="menulink" style="text-decoration: none;"><img id="bg" src="audioOff.png" height="30" width="30" style="margin-bottom:-10px; padding-bottom:-20px;"/> </a> </span> </span> </div> </div></div>"';
        htmlGenerated = true;
      }
    }

For reference htmlGenerated is a global variable set to false initially.

Describe expected and actual results

I expected this method to append the the html to a div with the id results. It works the first time

However, when I try to use the add_more function

function add_more() {
      htmlGenerated = false;
      i++;
      inputs = document.getElementsByClassName("inputBoxes")[0];
      row = document.createElement("div");
      row.innerHTML = "Key Term "+i+" :";
      row.setAttribute("class","row");
      key = document.createElement("input");
      key.setAttribute("id","el"+i);
      row.appendChild(key);
      inputs.appendChild(row);
      row2 = document.createElement("div");
      row2.setAttribute("class","row");
      row2.innerHTML = "Description  "+i+" :";
      description = document.createElement("input");
      description.setAttribute("id","dl"+i);
      row2.appendChild(description);
      inputs.appendChild(row2);
    }

I get

2. Describe what you’ve tried Show what you’ve tried and tell us what you found (on this site or elsewhere) and why it didn’t meet your needs. You can get better answers when you provide research.

I've figured out how to replace the existing html with the new html. Once the add more button is clicked the generatedhtml flag is set to false. Then when the user clicks generate html the old html is deleted. The new html should be added with the new key and description to the element with the id= results. The issue is that the textarea is not getting generated.