diff --git a/development/issues/closed/210.html b/development/issues/closed/210.html
new file mode 100644
index 0000000000000000000000000000000000000000..9605885e7ce37e51b34202c1740edd207cdce257
--- /dev/null
+++ b/development/issues/closed/210.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>initializing of reloaded html fields #210</title>
+ <script src="./210.mjs" type="module"></script>
+</head>
+<body>
+<h1>initializing of reloaded html fields #210</h1>
+<p></p>
+<ul>
+ <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/210">Issue #210</a></li>
+ <li><a href="/">Back to overview</a></li>
+</ul>
+<main>
+
+ <monster-datasource-rest id="ds210"
+ data-monster-option-read-url="/issue-210.json"
+ data-monster-option-write-url="/issue-210"
+ data-monster-option-write-acceptedstatus="400::200"
+ data-monster-option-features-autoinit="true">
+ </monster-datasource-rest>
+
+ <monster-dataset data-monster-option-index="0"
+ data-monster-option-datasource-selector="#ds210"
+ data-monster-option-mapping-data="">
+ ID:
+ <div data-monster-replace="path:data.id"></div>
+ <div data-monster-replace="path:data.name"></div>
+ </monster-dataset>
+
+
+ <monster-form data-monster-option-datasource-selector="#ds210"
+ data-monster-option-mapping-data=""
+ data-monster-option-features-mutationobserver="true"
+ >
+
+ <monster-field-set data-monster-option-labels-title="my title">
+
+ <label for="id">field id</label><input id="id" type="number"
+ data-monster-attributes="value path:data.id"
+ data-monster-bind="path:data.id">
+
+ <label for="name">field name</label><input id="name" data-monster-attributes="value path:data.name">
+ </monster-field-set>
+ <monster-field-set data-monster-option-labels-title="">
+
+ <monster-datasource-save-button data-monster-option-datasource-selector="#ds210">ok
+ </monster-datasource-save-button>
+
+ </monster-field-set>
+
+
+ </monster-form>
+
+</main>
+</body>
+</html>
+
+
+
+
diff --git a/development/issues/closed/210.mjs b/development/issues/closed/210.mjs
new file mode 100644
index 0000000000000000000000000000000000000000..42c71cbdb8aa3b635d5725c7f23361eda2d0c63a
--- /dev/null
+++ b/development/issues/closed/210.mjs
@@ -0,0 +1,111 @@
+/**
+ * @file development/issues/open/210.mjs
+ * @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/210
+ * @description initializing of reloaded html fields
+ * @issue 210
+ */
+
+import "../../../source/components/style/property.pcss";
+import "../../../source/components/style/color.pcss";
+import "../../../source/components/style/normalize.pcss";
+import "../../../source/components/style/typography.pcss";
+import "../../../source/components/style/form.pcss";
+
+import "../../../source/components/datatable/datasource/rest.mjs";
+import "../../../source/components/datatable/save-button.mjs";
+import "../../../source/components/form/form.mjs";
+import "../../../source/components/form/field-set.mjs";
+import "../../../source/components/form/select.mjs";
+import "../../../source/components/form/context-help.mjs";
+import "../../../source/components/form/context-error.mjs";
+import {domReady} from "../../../source/dom/ready.mjs";
+
+domReady.then(() => {
+
+ // get html from server '/issue-210.html' and insert after last field in form
+ fetch('/issue-210.html')
+ .then(response => response.text())
+ .then(html => {
+ const form = document.querySelector('monster-form');
+ const fieldSet = document.querySelector('monster-field-set');
+ if (!fieldSet) {
+ return;
+ }
+ fieldSet.insertAdjacentHTML('beforeend', html);
+
+
+// form.refresh();
+
+ });
+
+
+});
+
+
+
+/**
+ * Interne Daten löschen, nicht übertragen
+ * Änderungen werden global geändert
+ * diese Werte stehen nach dem speichern nicht mehr zur Verfügung
+
+for (const [key, value] of Object.entries(data.dataset)) {
+ for (const [k, v] of Object.entries(data.dataset[key])) {
+ if (k.indexOf(internalDataPrefix) !== -1) {
+ delete data.dataset[key][k];
+ };
+ }
+}
+
+//nicht mit den Original daten arbeiten
+//da sich so auch die Originaldaten ändern
+let currentData = clone(data);
+
+let d = diff(currentData.dataset,lastData.dataset);
+
+/**
+ * Daten für den nächsten Vergleich speichern
+
+lastData = clone(currentData);
+
+let changedKeys = [];
+for (const [key, value] of Object.entries(d)) {
+ let index = value.path[0]
+ if(changedKeys.includes(index)===false){
+ changedKeys.push(index);
+ }
+}
+
+/**
+ * Daten die sich nicht geändert haben löschen
+
+let updateData = [];
+for (const [key, value] of Object.entries(currentData.dataset)) {
+ if(changedKeys.includes(key)===true){
+ updateData.push(currentData.dataset[key]);
+ }
+};
+
+
+/**
+ * Zeit umformatieren für die Daten die noch
+ * übertragen werden sollen
+
+for (const [key, value] of Object.entries(updateData)) {
+ let time = updateData[key]?.scheduler?.time;
+ if (time !== undefined) {
+ /**
+ * Locale Zeit '2024-03-22T11:22:33'
+
+ let d = new Date(Date.parse(time));
+ /**
+ * UTC Zeit '2024-03-22T10:22:33.000Z'
+
+ d = d.toISOString();
+ updateData[key].scheduler.time = d;
+ }
+
+}
+
+return updateData;
+
+*/
\ No newline at end of file
diff --git a/development/mock/issue-210.js b/development/mock/issue-210.js
new file mode 100644
index 0000000000000000000000000000000000000000..d8fce82c3ea3cda639650aba2e178270a05063ee
--- /dev/null
+++ b/development/mock/issue-210.js
@@ -0,0 +1,101 @@
+const json =
+ `[
+ {
+ "id": 1000,
+ "name": "order 1",
+ "load1": "value load row 1:1",
+ "load2": "value load row 1:2",
+ "load3": "value load row 1:3"
+ },
+ {
+ "id": 1001,
+ "name": "order 2",
+ "load1": "value load row 2:1",
+ "load2": "value load row 2:2",
+ "load3": "value load row 2:3"
+ }
+
+ ]`;
+
+
+// check if json is valid
+JSON.parse(json)
+
+const json400Error=`[
+ {
+ "sys": {
+ "type": "Error",
+ "message": "Invalid request"
+ }
+ }
+ ]`
+
+// check if json is valid
+JSON.parse(json400Error)
+
+
+const json200Error=`[
+ {
+ "sys": {
+ "type": "Error",
+ "message": "Invalid request"
+ }
+ }
+ ]`
+
+// check if json is valid
+JSON.parse(json200Error)
+
+
+const html = `
+<label for="load1">field load 1</label><input id="load1" data-monster-attributes="value path:data.load1">
+<label for="load2">field load 2</label><input id="load2" data-monster-attributes="value path:data.load2">
+<label for="load3">field load 3</label><input id="load3" data-monster-attributes="value path:data.load3">
+`;
+
+
+
+const requestDelay = 100
+
+export default [
+ {
+ url: '/issue-210.json',
+ method: 'get',
+ rawResponse: async (req, res) => {
+ res.setHeader('Content-Type', 'application/json')
+ res.statusCode = 200
+
+ setTimeout(function() {
+ res.end(json)
+ }, requestDelay);
+ },
+ },
+
+ {
+ url: '/issue-210',
+ method: 'post',
+ rawResponse: async (req, res) => {
+ res.setHeader('Content-Type', 'application/json')
+ res.statusCode = 400
+
+ setTimeout(function() {
+ res.end(json400Error)
+ }, requestDelay);
+ },
+ },
+
+ {
+ url: '/issue-210.html',
+ method: 'get',
+ rawResponse: async (req, res) => {
+ res.setHeader('Content-Type', 'text/html')
+ res.statusCode = 200
+
+ setTimeout(function() {
+ res.end(html)
+ }, 4000);
+
+ },
+ }
+
+];
\ No newline at end of file