diff --git a/assets/controllers/elements/collection_type_controller.js b/assets/controllers/elements/collection_type_controller.js
new file mode 100644
index 00000000..f0fd09ba
--- /dev/null
+++ b/assets/controllers/elements/collection_type_controller.js
@@ -0,0 +1,62 @@
+import {Controller} from "@hotwired/stimulus";
+
+import * as bootbox from "bootbox";
+import "../../css/bootbox_extensions.css";
+
+export default class extends Controller {
+    static values = {
+        deleteMessage: String,
+        prototype: String,
+    }
+
+    static targets = ["target"];
+
+    /**
+     * Decodes escaped HTML entities
+     * @param {string} input
+     * @returns {string}
+     */
+    htmlDecode(input) {
+        const doc = new DOMParser().parseFromString(input, "text/html");
+        return doc.documentElement.textContent;
+    }
+
+    /**
+     * Generates a unique ID to be used for the new element
+     * @returns {string}
+     */
+    generateUID() {
+        const long = (performance.now().toString(36)+Math.random().toString(36)).replace(/\./g,"");
+        return long.slice(0, 6); // 6 characters is enough for our unique IDs here
+    }
+
+    /**
+     * Create a new entry in the target using the given prototype value
+     */
+    createElement(event) {
+        const targetTable = this.targetTarget;
+        const prototype = this.prototypeValue
+
+        //Apply the index to prototype to create our element to insert
+        const newElementStr = this.htmlDecode(prototype.replace(/__name__/g, this.generateUID()));
+
+
+        //Insert new html after the last child element
+        //If the table has a tbody, insert it there
+        if(targetTable.tBodies[0]) {
+            targetTable.tBodies[0].insertAdjacentHTML('beforeend', newElementStr);
+        } else { //Otherwise just insert it
+            targetTable.insertAdjacentHTML('beforeend', newElementStr);
+        }
+    }
+
+    deleteElement(event) {
+        bootbox.confirm(this.deleteMessageValue, (result) => {
+            if(result) {
+                const target = event.target;
+                //Remove the row element from the table
+                target.closest("tr").remove();
+            }
+        });
+    }
+}
\ No newline at end of file
diff --git a/assets/css/bootbox_extensions.css b/assets/css/bootbox_extensions.css
new file mode 100644
index 00000000..aaf273ab
--- /dev/null
+++ b/assets/css/bootbox_extensions.css
@@ -0,0 +1,27 @@
+.modal-body > .bootbox-close-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0.5rem 0.75rem;
+    z-index: 1;
+}
+.modal .bootbox-close-button {
+    font-weight: 100;
+}
+
+button.bootbox-close-button {
+    padding: 0;
+    background-color: transparent;
+    border: 0;
+    -webkit-appearance: none;
+}
+
+.bootbox-close-button {
+    /* float: right; */
+    font-size: 1.40625rem;
+    font-weight: 600;
+    line-height: 1;
+    color: #000;
+    text-shadow: none;
+    opacity: .5;
+}
\ No newline at end of file
diff --git a/templates/AdminPages/_parameters.html.twig b/templates/AdminPages/_parameters.html.twig
index 49f3d0c5..0a98674b 100644
--- a/templates/AdminPages/_parameters.html.twig
+++ b/templates/AdminPages/_parameters.html.twig
@@ -1,54 +1,31 @@
 {% form_theme form with ['Parts/edit/edit_form_styles.html.twig', "bootstrap_4_layout.html.twig"] %}
 
-<table class="table table-striped table-sm table-bordered table-responsive-md" id="specifications_table" data-prototype="{% if form.parameters.vars.prototype is defined %}{{ form_widget(form.parameters.vars.prototype)|e('html_attr') }}{% endif %}">
-    <thead>
-    <tr>
-        <th>{% trans %}specifications.property{% endtrans %}</th>
-        <th>{% trans %}specifications.symbol{% endtrans %}</th>
-        <th>{% trans %}specifications.value_min{% endtrans %}</th>
-        <th>{% trans %}specifications.value_typ{% endtrans %}</th>
-        <th>{% trans %}specifications.value_max{% endtrans %}</th>
-        <th>{% trans %}specifications.unit{% endtrans %}</th>
-        <th>{% trans %}specifications.text{% endtrans %}</th>
-        <th>{% trans %}specifications.group{% endtrans %}</th>
-        <th></th>
-    </tr>
-    </thead>
-    <tbody>
-    {% for param in form.parameters %}
-        {{ form_widget(param) }}
-    {% endfor %}
-    </tbody>
-</table>
+{% import 'components/collection_type.macro.html.twig' as collection %}
 
-<button type="button" class="btn btn-success mb-2" onclick="create_specification_entry(this)" {% if not is_granted('edit', entity) %}disabled{% endif %}>
-    <i class="fas fa-plus-square fa-fw"></i>
-    {% trans %}specification.create{% endtrans %}
-</button>
+<div {{ collection.controller(form, 'parameter.delete.confirm') }}>
+    <table class="table table-striped table-sm table-bordered table-responsive-md" id="specifications_table" {{ collection.target() }}>
+        <thead>
+        <tr>
+            <th>{% trans %}specifications.property{% endtrans %}</th>
+            <th>{% trans %}specifications.symbol{% endtrans %}</th>
+            <th>{% trans %}specifications.value_min{% endtrans %}</th>
+            <th>{% trans %}specifications.value_typ{% endtrans %}</th>
+            <th>{% trans %}specifications.value_max{% endtrans %}</th>
+            <th>{% trans %}specifications.unit{% endtrans %}</th>
+            <th>{% trans %}specifications.text{% endtrans %}</th>
+            <th>{% trans %}specifications.group{% endtrans %}</th>
+            <th></th>
+        </tr>
+        </thead>
+        <tbody>
+        {% for param in form.parameters %}
+            {{ form_widget(param) }}
+        {% endfor %}
+        </tbody>
+    </table>
 
-<script>
-    function delete_specification_entry(btn) {
-        window.bootbox.confirm('{% trans %}parameter.delete.confirm{% endtrans %}', function (result) {
-            if(result) {
-                $(btn).closest("tr").remove();
-            }
-        });
-    }
-
-    function create_specification_entry(btn) {
-        //Determine the table, so we can determine, how many entries there are already.
-        $holder = $(btn).siblings("table");
-
-        var index = $holder.children("tbody").children("tr").length;
-        var newForm = $holder.data("prototype");
-
-        //Increase the index
-        newForm = newForm.replace(/__name__/g, index);
-
-        $holder.children("tbody").append(newForm);
-
-        //Reinit the selectpickers
-        //$(".selectpicker").selectpicker();
-
-    }
-</script>
\ No newline at end of file
+    <button type="button" class="btn btn-success mb-2" {{ collection.create_btn() }} {% if not is_granted('edit', entity) %}disabled{% endif %}>
+        <i class="fas fa-plus-square fa-fw"></i>
+        {% trans %}specification.create{% endtrans %}
+    </button>
+</div>
\ No newline at end of file
diff --git a/templates/Parts/edit/_specifications.html.twig b/templates/Parts/edit/_specifications.html.twig
index 4176d750..e3bea0b1 100644
--- a/templates/Parts/edit/_specifications.html.twig
+++ b/templates/Parts/edit/_specifications.html.twig
@@ -1,7 +1,10 @@
 {% form_theme form with ['Parts/edit/edit_form_styles.html.twig', "bootstrap_4_layout.html.twig"] %}
 
-<table class="table table-striped table-sm table-bordered table-responsive-md" id="specifications_table" data-prototype="{% if form.parameters.vars.prototype is defined %}{{ form_widget(form.parameters.vars.prototype)|e('html_attr') }}{% endif %}">
-    <thead>
+{% import 'components/collection_type.macro.html.twig' as collection %}
+
+<div {{ collection.controller(form, 'parameter.delete.confirm') }}>
+    <table class="table table-striped table-sm table-bordered table-responsive-md" id="specifications_table" {{ collection.target() }}>
+        <thead>
         <tr>
             <th>{% trans %}specifications.property{% endtrans %}</th>
             <th>{% trans %}specifications.symbol{% endtrans %}</th>
@@ -13,42 +16,16 @@
             <th>{% trans %}specifications.group{% endtrans %}</th>
             <th></th>
         </tr>
-    </thead>
-    <tbody>
-    {% for param in form.parameters %}
-        {{ form_widget(param) }}
-    {% endfor %}
-    </tbody>
-</table>
+        </thead>
+        <tbody>
+        {% for param in form.parameters %}
+            {{ form_widget(param) }}
+        {% endfor %}
+        </tbody>
+    </table>
 
-<button type="button" class="btn btn-success" onclick="create_specification_entry(this)" {% if not is_granted('parameters.create', part) %}disabled{% endif %}>
-    <i class="fas fa-plus-square fa-fw"></i>
-    {% trans %}specification.create{% endtrans %}
-</button>
-
-<script>
-    function delete_specification_entry(btn) {
-        window.bootbox.confirm('{% trans %}parameter.delete.confirm{% endtrans %}', function (result) {
-            if(result) {
-                $(btn).closest("tr").remove();
-            }
-        });
-    }
-
-    function create_specification_entry(btn) {
-        //Determine the table, so we can determine, how many entries there are already.
-        $holder = $(btn).siblings("table");
-
-        var index = $holder.children("tbody").children("tr").length;
-        var newForm = $holder.data("prototype");
-
-        //Increase the index
-        newForm = newForm.replace(/__name__/g, index);
-
-        $holder.children("tbody").append(newForm);
-
-        //Reinit the selectpickers
-        //$(".selectpicker").selectpicker();
-
-    }
-</script>
\ No newline at end of file
+    <button type="button" class="btn btn-success"  {% if not is_granted('parameters.create', part) %}disabled{% endif %} {{ collection.create_btn() }}>
+        <i class="fas fa-plus-square fa-fw"></i>
+        {% trans %}specification.create{% endtrans %}
+    </button>
+</div>
\ No newline at end of file
diff --git a/templates/Parts/edit/edit_form_styles.html.twig b/templates/Parts/edit/edit_form_styles.html.twig
index b6d873b9..9ad495e0 100644
--- a/templates/Parts/edit/edit_form_styles.html.twig
+++ b/templates/Parts/edit/edit_form_styles.html.twig
@@ -63,6 +63,7 @@
 {% endblock %}
 
 {% block parameter_widget %}
+    {% import 'components/collection_type.macro.html.twig' as collection %}
     <tr>
         <td>{{ form_widget(form.name) }}{{ form_errors(form.name) }}</td>
         <td>{{ form_widget(form.symbol) }}{{ form_errors(form.symbol) }}</td>
@@ -73,7 +74,7 @@
         <td>{{ form_widget(form.value_text) }}{{ form_errors(form.value_text) }}</td>
         <td>{{ form_widget(form.group) }}{{ form_errors(form.group) }}</td>
         <td>
-            <button type="button" class="btn btn-danger btn-sm order_btn_delete {% if form.parent.vars.allow_delete is defined and  not form.parent.vars.allow_delete %}disabled{% endif %}" onclick="delete_specification_entry(this);" title="{% trans %}orderdetail.delete{% endtrans %}">
+            <button type="button" class="btn btn-danger btn-sm order_btn_delete {% if form.parent.vars.allow_delete is defined and  not form.parent.vars.allow_delete %}disabled{% endif %}" {{ collection.delete_btn() }} title="{% trans %}orderdetail.delete{% endtrans %}">
                 <i class="fas fa-trash-alt fa-fw"></i>
             </button>
             {{ form_errors(form) }}
diff --git a/templates/components/collection_type.macro.html.twig b/templates/components/collection_type.macro.html.twig
new file mode 100644
index 00000000..f7c848c1
--- /dev/null
+++ b/templates/components/collection_type.macro.html.twig
@@ -0,0 +1,18 @@
+{% macro controller(form, deleteMessage) %}
+    {{ stimulus_controller('elements/collection_type', {
+        'deleteMessage': 'parameter.delete.confirm'|trans,
+        'prototype': form_widget(form.parameters.vars.prototype)|e('html_attr')
+    }) }}
+{% endmacro %}
+
+{% macro target() %}
+    {{ stimulus_target('elements/collection_type', 'target') }}
+{% endmacro %}
+
+{% macro create_btn() %}
+    {{ stimulus_action('elements/collection_type', 'createElement') }}
+{% endmacro %}
+
+{% macro delete_btn() %}
+    {{ stimulus_action('elements/collection_type', 'deleteElement') }}
+{% endmacro %}
\ No newline at end of file