Replace text on click radio button and change it back to the original text if clicked on other radio button

String replace is working fine for me, But how to bring the last clicked radio button label text back to the original text?

function myFunction(id) {
    var str = document.getElementById(id).innerHTML; 
    var res = str.replace("{#var1#}", "<input type='text' name='var1' maxlength='30' size='30'>")
        .replace("{#var2#}", "<input type='text' name='var2' maxlength='30' size='30'>")
        .replace("{#var3#}", "<input type='text' name='var3' maxlength='30' size='30'>")
        .replace("{#var4#}", "<input type='text' name='var4' maxlength='30' size='30'>");
         document.getElementById(id).innerHTML = res;
}

Here is my PHP,HTML Code:

  <tr>
      <td><input onchange="myFunction('<?php echo $row['id']; ?>')" type="radio" name="id" value="<?php echo $row['id']; ?>" required></td>
      <td><b><?php echo  htmlspecialchars($row['template_name']);  ?></b></td>
      <td id="<?php echo $row['id']; ?>"><?php echo  str_replace("n","<br />",htmlspecialchars($row['template_content']));  ?></td>
  </tr>

Answer

I think you should add an extra attribute in the input instead (it can be data-origin or some thing like that). For example:

<input value="">
<div class="display" data-origin="xxxx"></div>

And then make a function trigger the change on the input:

$(input).onchange(() => {
    $(display).innerHtml = $(display).attr(data-origin)
});
//===continue your stuff====