Add information in contenteditable and generate stuff without loosing added infos

So I’ve created a list of radios where you can choose between 3 choices (cf. snippet) and then generate a report in a contenteditable area with the value of each radio.

It works fine, but I would like to be able to write text between the items and when you press again the button, only the items change but the added text stays. For the moment, when I generate the report, it deletes the added text (and it’s normal because I change the string with id=”itemXX” when I add text, but I can’t find a way to make it work :/ ).

The ideal would be that each item could be changed individually and the added text stays.

Thanks for the help 🙂

let listA = ["A1", "A2"];
let listB = ["B1", "B2"];

function report() {
    for (i=0; i<listA.length; i++){
    affichageRapport(listA[i]);
  }
    for (i=0; i<listB.length; i++){
    affichageRapport(listB[i]);
  }
}

function affichageRapport (x){
    document.getElementById("item"+x).innerHTML = document.querySelector("input[name="+x+"]:checked").value;
    }

.containers{
  max-width : 500px;
}
.subContainers{
  margin-bottom:10px;
}
.tripleChoice {
    display: flex;
    overflow: hidden;
    float: right;
}
.tripleChoice input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
}
.tripleChoice label {
    color: rgba(0, 0, 0, 0.6);
    font-size: 12px;
    text-align: center;
    padding: 4px 8px;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
}
.tripleChoice label:hover {
    cursor: pointer;
    background-color: #F9F7F7;
}
.tripleChoice input:checked + label {
    background-color: #3F72AF;
    color: #F9F7F7;
}
.editable{
 border: solid black 1px;
 padding: 10px;
}

<div class="containers">
  <div class="subContainers"><strong>itemA1</strong>
    <div class="tripleChoice">
      <input id="yesA1" name="A1" type="radio" value="item A1 = yes,"/>
      <label for="yesA1">yes</label>
      <input id="noA1" name="A1" type="radio" value="item A1 = no,"/>
      <label for="noA1">no</label>
      <input id="NTA1" name="A1" type="radio" value="item A1 = NT," checked="checked"/>
      <label for="NTA1">NT</label>
    </div>
  </div>
  <div class="subContainers"><strong>itemA2</strong>
    <div class="tripleChoice">
      <input id="yesA2" name="A2" type="radio" value="item A2 = yes."/>
      <label for="yesA2">yes</label>
      <input id="noA2" name="A2" type="radio" value="item A2 = no."/>
      <label for="noA2">no</label>
      <input id="NTA2" name="A2" type="radio" value="item A2 = NT." checked="checked"/>
      <label for="NTA2">NT</label>
    </div>
  </div>
  <div class="subContainers"><strong>itemB1</strong>
    <div class="tripleChoice">
      <input id="yesB1" name="B1" type="radio" value="item B1 = yes,"/>
      <label for="yesB1">yes</label>
      <input id="noB1" name="B1" type="radio" value="item B1 = no,"/>
      <label for="noB1">no</label>
      <input id="NTB1" name="B1" type="radio" value="item B1 = NT," checked="checked"/>
      <label for="NTB1">NT</label>
    </div>
  </div>
  <div class="subContainers"><strong>itemB2</strong>
    <div class="tripleChoice">
      <input id="yesB2" name="B2" type="radio" value="item B2 = yes."/>
      <label for="yesB2">yes</label>
      <input id="noB2" name="B2" type="radio" value="item B2 = no."/>
      <label for="noB2">no</label>
      <input id="NTB2" name="B2" type="radio" value="item B2 = NT." checked="checked"/>
      <label for="NTB2">NT</label>
    </div>
  </div>
  <div class="subContainers">
    <button class="generate" onclick="report()">Create report</button>
  </div>
  <div class="subContainers editable" contenteditable="true">
    <div id="firstPart"/>
      <string id="itemA1"></string>
      <string id="itemA2"></string>
      <p/>
    </div>
    <div id="secondPart"/>
      <string id="itemB1"></string>
      <string id="itemB2"></string>
      <p/>
    </div>
  </div>
 </div>

Answer

You can just move the editable part of the report to the line after the “form input lines”. I highlighted them with a gray background. Now, the user an only edit these two lines.

let listA = ["A1", "A2"];
let listB = ["B1", "B2"];

function report() {
    for (i=0; i<listA.length; i++){
    affichageRapport(listA[i]);
  }
    for (i=0; i<listB.length; i++){
    affichageRapport(listB[i]);
  }
}

function affichageRapport (x){
    document.getElementById("item"+x).innerHTML = document.querySelector("input[name="+x+"]:checked").value;
    }

.containers{
  max-width : 500px;
}
.subContainers{
  margin-bottom:10px;
}
.tripleChoice {
    display: flex;
    overflow: hidden;
    float: right;
}
.tripleChoice input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
}
.tripleChoice label {
    color: rgba(0, 0, 0, 0.6);
    font-size: 12px;
    text-align: center;
    padding: 4px 8px;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
}
.tripleChoice label:hover {
    cursor: pointer;
    background-color: #F9F7F7;
}
.tripleChoice input:checked + label {
    background-color: #3F72AF;
    color: #F9F7F7;
}
.editable{
 border: solid black 1px;
 padding: 10px;
}

p[contenteditable], span[contenteditable] {
  background: #eee;
  padding: .2em;
  margin: 0;
}

<div class="containers">
  <div class="subContainers"><strong>itemA1</strong>
    <div class="tripleChoice">
      <input id="yesA1" name="A1" type="radio" value="item A1 = yes,"/>
      <label for="yesA1">yes</label>
      <input id="noA1" name="A1" type="radio" value="item A1 = no,"/>
      <label for="noA1">no</label>
      <input id="NTA1" name="A1" type="radio" value="item A1 = NT," checked="checked"/>
      <label for="NTA1">NT</label>
    </div>
  </div>
  <div class="subContainers"><strong>itemA2</strong>
    <div class="tripleChoice">
      <input id="yesA2" name="A2" type="radio" value="item A2 = yes."/>
      <label for="yesA2">yes</label>
      <input id="noA2" name="A2" type="radio" value="item A2 = no."/>
      <label for="noA2">no</label>
      <input id="NTA2" name="A2" type="radio" value="item A2 = NT." checked="checked"/>
      <label for="NTA2">NT</label>
    </div>
  </div>
  <div class="subContainers"><strong>itemB1</strong>
    <div class="tripleChoice">
      <input id="yesB1" name="B1" type="radio" value="item B1 = yes,"/>
      <label for="yesB1">yes</label>
      <input id="noB1" name="B1" type="radio" value="item B1 = no,"/>
      <label for="noB1">no</label>
      <input id="NTB1" name="B1" type="radio" value="item B1 = NT," checked="checked"/>
      <label for="NTB1">NT</label>
    </div>
  </div>
  <div class="subContainers"><strong>itemB2</strong>
    <div class="tripleChoice">
      <input id="yesB2" name="B2" type="radio" value="item B2 = yes."/>
      <label for="yesB2">yes</label>
      <input id="noB2" name="B2" type="radio" value="item B2 = no."/>
      <label for="noB2">no</label>
      <input id="NTB2" name="B2" type="radio" value="item B2 = NT." checked="checked"/>
      <label for="NTB2">NT</label>
    </div>
  </div>
  <div class="subContainers">
    <button class="generate" onclick="report()">Create report</button>
  </div>
  <div class="subContainers editable">
    <div id="firstPart"/>
      <span id="itemA1"></span>
      <span contenteditable="true"></span>
      <span id="itemA2"></span>
      <span contenteditable="true"></span>
      <p contenteditable="true"></p>
    </div>
    <div id="secondPart"/>
      <span id="itemB1"></span>
      <span contenteditable="true"></span>
      <span id="itemB2"></span>
      <span contenteditable="true"></span>
      <p contenteditable="true"></p>
    </div>
  </div>
 </div>