Reset date input type with input displayed on a disabled textarea and appended after

Question

I have a form with input fields on one side and disabled input fields on the other that displays the value from its corresponding input field. Also i have the option to clone these forms with one button that clones the two sides at the same time, one of them is education so one can put in multiple educations etc.

Everything works fine except the date input and output fields, if i use .reset() or document.getElementById("myid").value = ""; on them the output stops working, it just stays blank. Also even when i dont reset them the datepicker stops working after cloning.

Here is my javascript code for this part of the form

/* Print funksjon for år fra */
    
    function velgDatoUtdanning() {
      var årUtdanning = document.getElementById("input-år").value;
      document.getElementById("output-år").innerHTML = årUtdanning;
    }
    
    /* Print funksjon for år til */
    
    function velgDatoUtdanningTil() {
      var årUtdanningTil = document.getElementById("input-årtil").value;
      document.getElementById("output-årtil").innerHTML = årUtdanningTil;
    }
    
    /* Print funksjon for skole */
    
    var inputBox = document.getElementById("input-skole");
    
    inputBox.onkeyup = function () {
      document.getElementById("output-skole").innerHTML = inputBox.value * 2;
      var val = document.getElementById("input-skole").value;
      document.getElementById("output-skole").value = val;
    };
    
    /* Print funksjon for fag */
    
    var inputBox = document.getElementById("input-fag");
    
    inputBox.onkeyup = function () {
      document.getElementById("output-fag").innerHTML = inputBox.value * 2;
      var val = document.getElementById("input-fag").value;
      document.getElementById("output-fag").value = val;
    };

    /* Legg til ny utdanning append method */
    
    function appendUtdanning() {
      if (document.getElementById("input-skole").value == "") {
        return false;
      } else if (document.getElementById("input-fag").value == "") {
        return false;
      } else {
        let formUtdanning = document.querySelector("#reset-utdanning");
        let clonedFormUtdanning = formUtdanning.cloneNode(true);
        clonedFormUtdanning.id = "formUtdanning-kopi";
        var utdanningNy = document.body.appendChild(clonedFormUtdanning);
        document.getElementById("motta-utdanning").appendChild(utdanningNy);
        document.getElementById("reset-utdanning").reset();
    
        let formUtdanningHøyre = document.querySelector("#copy-høyre");
        let clonedFormUtdanningHøyre = formUtdanningHøyre.cloneNode(true);
        clonedFormUtdanningHøyre.id = "formUtdanningHøyre-kopi";
        var utdanningNyHøyre = document.body.appendChild(clonedFormUtdanningHøyre);
        document
          .getElementById("motta-utdanningHøyre")
          .appendChild(utdanningNyHøyre);
        document.getElementById("output-skole").value = "";
        document.getElementById("output-fag").value = "";
        addEventListener("click", function (event) {
          event.preventDefault();
        });
      }
    }

<div id="copy-utdanning">
  <form id="reset-utdanning" class="venstre-form">
    <div class="utdanning">
      <table id="duplisere-utdanning">
        <h4 class="h4-venstre">Utdanning</h4>
        <tr>
          <label for="FraUtdanning">Fra</label>
          <input type="date" rows="2" maxlength="50" id='input-år' class="venstre-input" placeholder="År" onchange="velgDatoUtdanning()"></input>
        </tr>
        <tr>
          <label for="FraUtdanning">Til</label>
          <input type="date" rows="2" maxlength="50" id='input-årtil' class="venstre-input" placeholder="År" onchange="velgDatoUtdanningTil()"></input>
        </tr>
        <tr>
          <textarea type='text' rows="1" maxlength="50" id='input-skole' class="venstre-input" placeholder="Skole"></textarea>
        </tr>
        <tr>
          <textarea type='text' rows="1" maxlength="50" id='input-fag' class="venstre-input" placeholder="Fag"></textarea>
        </tr>
      </table>
    </div>
  </form>
</div>
<div class="kopi-knapp">
  <button class="knapp" id="appendUtdanningknapp" onclick="appendUtdanning();">Legg til utdanning</button>
</div>
<div id="motta-utdanning">

</div>

<div>
  <div class="output-posisjon">
    <div id="copy-utdanningHøyre">
      <form id="copy-høyre">
        <table id="" class="">
          <tbody>
            <tr>
              <th>Utdanning</th>
            </tr>
            <tr>
              <td><textarea type="date" class="textarea-høyre" type='text' id='output-år' disabled></textarea></td>
              <td><textarea type="date" class="textarea-høyre" type='text' id='output-årtil' disabled></textarea></td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td><textarea class="textarea-høyre" type='text' id='output-skole' disabled></textarea></td>
              <td><textarea colspan="2" class="textarea-høyre" type='text' id='output-fag' disabled></textarea></td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
    <div id="motta-utdanningHøyre">

    </div>
  </div>
</div>

This is what happens when i reset the output texareas that displays the dates: JSFiddle

Anyone with an idea on how to reset the output date fields correctly or where i went wrong?

Answer 1

I found a workaround eventually, what i had to do is to create a script with type html and add the html i want to clone inside it, this way i do not need to reset anything, even though it does not help me find out what the source of the issue is.