Add text after pressing button in Javascript

So I want to imitate a Survey where a Survey has:


  1. Question Name
  2. Options

The question name is basically just some text which can be changed on clicked.

Initially there is one option and it’s checkbox to tick it. This option should also change when clicked.
Also there’s is this button where should add a new option to a specific question and there will be one question with let’s say 4 options and you can check any amount of them.

Now after the first question has been edited (put whatever text you want for the question name and as many different options you need) you should be able to add more questions and do the same thing.

I tried to do this and I managed to find some code which edits text on click but I don’t know how I can add another option or another question. My code is as follows:

function help() {
  // code to add another option
}
body {
  background-color: #00ffaa;
  font-family: Verdana;
  text-align: center;
}

.questionName {
  margin-top: 15px;
  font-size: 20px;
}

.optionName {
  margin-top: 8px;
  font-size: 15px;
  font-style: italic;
  margin-left: 605px;
}

.box {
  margin-top: 12px;
}

.option {
  display: flex;
}
<html>
  <head>
    <title>Your Survey Form</title>
    <link rel="stylesheet" href="DemoSurveyStyle.css">
  </head>
  <body>
    <form>
      <h1 id="myText" contenteditable="true">Survey Name</h1>
      <div id="question">
        <div class="questionName" contenteditable="true">Question</div>
        <div class="option">
          <div class="optionName" contenteditable="true">Option</div>
          <input type="checkbox" class="box">
        </div>
        <button id="addOpButton" onclick="help()">Add Option</button>
      </div>
    </form>
    <script src="DemoCode.js"></script>
  </body>
</html>

If you could help me to how I should do this I would really appreciate. I think it’s not very complicated just I have never done it and don’t know how to do it.