plugins – Sub-bidang saya yang dibuat oleh JS menghilang setelah pengiriman formulir

butuh bantuan di sini. Saya mencoba menggunakan HTML untuk menampilkan formulir, dan JS ada untuk menambahkan fungsi untuk menambahkan subbidang baru oleh pengguna. Tapi masalah saya adalah setelah saya menekan tombol Simpan, sub-bidang, dan nilainya hilang. Itu menghilang setelah saya menekan tombol Kirim. Adakah yang saya lakukan salah? Bantuan apa pun dihargai.

<form method="post" action="">
          <label for="headers">Headers (optional):</label><br>
          <div id="key-value-fields">
              <label for="key1">Key:</label>
              <input type="text" id="key1" name="key1" value="<?php if (isset($_POST['key1'])) { echo $_POST['key1']; } ?>">
              <label for="value1">Value:</label>
              <input type="text" id="value1" name="value1" value="<?php if (isset($_POST['value1'])) { echo $_POST['value1']; } ?>">
          </div>
          <button type="button" id="add-another" onclick="addKeyValueField()">Add another</button>
          <input type="submit" value="Send Request">
       </form>
<script>
          var fieldIndex = 2;
          function addKeyValueField() {
              var keyValueFields = document.getElementById('key-value-fields');
              var newFields = document.createElement('div');
              newFields.innerHTML = '<label for="key' + fieldIndex + '">Key:</label> <input type="text" id="key' + fieldIndex + '" name="key' + fieldIndex + '"> <label for="value' + fieldIndex + '">Value:</label> <input type="text" id="value' + fieldIndex + '" name="value' + fieldIndex + '"> <button type="button" onclick="deleteKeyValueField(this)">Delete</button>';
              keyValueFields.appendChild(newFields);
              fieldIndex++;
          }
          function deleteKeyValueField(button) {
              var keyValueField = button.parentElement;
              keyValueField.remove();
          }
</script>