diff --git a/modules/OfflinePayments/Resources/assets/js/offline-payments.js b/modules/OfflinePayments/Resources/assets/js/offline-payments.js
index c9e93ffef..e4ac8644f 100644
--- a/modules/OfflinePayments/Resources/assets/js/offline-payments.js
+++ b/modules/OfflinePayments/Resources/assets/js/offline-payments.js
@@ -67,7 +67,7 @@ const app = new Vue({
 
             this.component = Vue.component('add-new-component', (resolve, reject) => {
                 resolve({
-                    template : '<div id="dynamic-component"><akaunting-modal v-if="confirm.show" :show="confirm.show" :title="confirm.title" :message="confirm.message" :button_cancel="confirm.button_cancel" :button_delete="confirm.button_delete" @confirm="onDelete" @cancel="cancelDelete"></akaunting-modal></div>',
+                    template : '<div id="dynamic-delete-component"><akaunting-modal v-if="confirm.show" :show="confirm.show" :title="confirm.title" :message="confirm.message" :button_cancel="confirm.button_cancel" :button_delete="confirm.button_delete" @confirm="onDelete" @cancel="cancelDelete"></akaunting-modal></div>',
 
                     mixins: [
                         Global
diff --git a/resources/assets/js/components/AkauntingModalAddNew.vue b/resources/assets/js/components/AkauntingModalAddNew.vue
index ccc6dbe05..3c9f6829c 100644
--- a/resources/assets/js/components/AkauntingModalAddNew.vue
+++ b/resources/assets/js/components/AkauntingModalAddNew.vue
@@ -22,6 +22,7 @@
                             </div>
                             <div class="modal-body pb-0" v-else>
                                 <form id="form-create" method="POST" action="#"/>
+
                                 <component v-bind:is="component"></component>
                             </div>
                         </slot>
@@ -143,10 +144,12 @@ export default {
     },
 
     mounted() {
+        let form_prefix = this._uid;
+
         if (this.is_component) {
             this.component = Vue.component('add-new-component', (resolve, reject) => {
                 resolve({
-                    template : '<div id="modal-add-new-form">' + this.message + '</div>',
+                    template : '<div id="modal-add-new-form-' + form_prefix + '">' + this.message + '</div>',
 
                     components: {
                         AkauntingRadioGroup,
@@ -163,7 +166,7 @@ export default {
                     },
 
                     mounted() {
-                        let form_id = document.getElementById('modal-add-new-form').children[0].id;
+                        let form_id = document.getElementById('modal-add-new-form-' + form_prefix).children[0].id;
 
                         this.form = new Form(form_id);
                     },
diff --git a/resources/assets/js/mixins/global.js b/resources/assets/js/mixins/global.js
index 13572c88d..57044111f 100644
--- a/resources/assets/js/mixins/global.js
+++ b/resources/assets/js/mixins/global.js
@@ -141,7 +141,7 @@ export default {
 
             this.component = Vue.component('add-new-component', (resolve, reject) => {
                 resolve({
-                    template : '<div id="dynamic-component"><akaunting-modal v-if="confirm.show" :show="confirm.show" :title="confirm.title" :message="confirm.message" :button_cancel="confirm.button_cancel" :button_delete="confirm.button_delete" @confirm="onDelete" @cancel="cancelDelete"></akaunting-modal></div>',
+                    template : '<div id="dynamic-delete-component"><akaunting-modal v-if="confirm.show" :show="confirm.show" :title="confirm.title" :message="confirm.message" :button_cancel="confirm.button_cancel" :button_delete="confirm.button_delete" @confirm="onDelete" @cancel="cancelDelete"></akaunting-modal></div>',
 
                     components: {
                         AkauntingModal,
@@ -347,7 +347,7 @@ export default {
 
             this.component = Vue.component('add-new-component', (resolve, reject) => {
                 resolve({
-                    template : '<div id="dynamic-component"><akaunting-modal v-if="confirm.show" :show="confirm.show" :title="confirm.title" :message="confirm.message" :button_cancel="confirm.button_cancel" :button_delete="confirm.button_delete" @confirm="onDelete" @cancel="cancelDelete"></akaunting-modal></div>',
+                    template : '<div id="dynamic-delete-file-component"><akaunting-modal v-if="confirm.show" :show="confirm.show" :title="confirm.title" :message="confirm.message" :button_cancel="confirm.button_cancel" :button_delete="confirm.button_delete" @confirm="onDelete" @cancel="cancelDelete"></akaunting-modal></div>',
 
                     components: {
                         AkauntingModal,
diff --git a/resources/assets/js/views/purchases/bills.js b/resources/assets/js/views/purchases/bills.js
index 8436bc9ca..4c667b778 100644
--- a/resources/assets/js/views/purchases/bills.js
+++ b/resources/assets/js/views/purchases/bills.js
@@ -338,7 +338,7 @@ const app = new Vue({
 
                 this.component = Vue.component('add-new-component', (resolve, reject) => {
                     resolve({
-                        template: '<div id="dynamic-component"><akaunting-modal-add-new modal-dialog-class="modal-md" :show="payment.modal" @submit="onSubmit" @cancel="onCancel" :buttons="payment.buttons" :title="payment.title" :is_component=true :message="payment.html"></akaunting-modal-add-new></div>',
+                        template: '<div id="dynamic-payment-component"><akaunting-modal-add-new modal-dialog-class="modal-md" :show="payment.modal" @submit="onSubmit" @cancel="onCancel" :buttons="payment.buttons" :title="payment.title" :is_component=true :message="payment.html"></akaunting-modal-add-new></div>',
 
                         mixins: [
                             Global
diff --git a/resources/assets/js/views/sales/invoices.js b/resources/assets/js/views/sales/invoices.js
index 580ec7884..69403c717 100644
--- a/resources/assets/js/views/sales/invoices.js
+++ b/resources/assets/js/views/sales/invoices.js
@@ -339,7 +339,7 @@ const app = new Vue({
 
                 this.component = Vue.component('add-new-component', (resolve, reject) => {
                     resolve({
-                        template: '<div id="dynamic-component"><akaunting-modal-add-new modal-dialog-class="modal-md" :show="payment.modal" @submit="onSubmit" @cancel="onCancel" :buttons="payment.buttons" :title="payment.title" :is_component=true :message="payment.html"></akaunting-modal-add-new></div>',
+                        template: '<div id="dynamic-payment-component"><akaunting-modal-add-new modal-dialog-class="modal-md" :show="payment.modal" @submit="onSubmit" @cancel="onCancel" :buttons="payment.buttons" :title="payment.title" :is_component=true :message="payment.html"></akaunting-modal-add-new></div>',
 
                         mixins: [
                             Global
diff --git a/resources/views/partials/admin/content.blade.php b/resources/views/partials/admin/content.blade.php
index 62a4b5181..990c21787 100644
--- a/resources/views/partials/admin/content.blade.php
+++ b/resources/views/partials/admin/content.blade.php
@@ -7,7 +7,8 @@
         @stack('content_content_end')
         <notifications></notifications>
 
-        <form id="form-create" method="POST" action="#"/>
+        <form id="form-dynamic-component" method="POST" action="#"></form>
+
         <component v-bind:is="component"></component>
     </div>
 @stack('content_end')
diff --git a/resources/views/partials/portal/content.blade.php b/resources/views/partials/portal/content.blade.php
index 62a4b5181..990c21787 100644
--- a/resources/views/partials/portal/content.blade.php
+++ b/resources/views/partials/portal/content.blade.php
@@ -7,7 +7,8 @@
         @stack('content_content_end')
         <notifications></notifications>
 
-        <form id="form-create" method="POST" action="#"/>
+        <form id="form-dynamic-component" method="POST" action="#"></form>
+
         <component v-bind:is="component"></component>
     </div>
 @stack('content_end')