Dynamic form ID

resources/views/app/patient/segment-templates/omega_pe/edit.blade.php

@@ -30,6 +30,9 @@ if ($point->lastChildReview && $point->lastChildReview->data) {
   $contentData = $point->lastChildReview->data;
 }
 
+$containerID = 'edit-omega-pe-' . rand(10,100);
+
+
 ?>
 <hr class="hide-outside-popup mt-3 mb-0">
 <div class="p-3 mcp-theme-1">
@@ -44,7 +47,7 @@ if ($point->lastChildReview && $point->lastChildReview->data) {
       <input type="hidden" name="noteUid" value="<?= $note->uid ?>">
       <input type="hidden" name="data">
 
-      <div id="edit-omega-pe">
+      <div id="{{ $containerID }}">
         <div class="form-group">
           <label class="m-0">General:</label>
           <div class="d-flex align-items-end">
@@ -366,12 +369,13 @@ if ($point->lastChildReview && $point->lastChildReview->data) {
 </div>
 
 <script>
+  var containerID = "{{ $containerID }}";
   (function() {
     function initPE() {
       let model = <?= $contentData ? json_encode($contentData) : '{}' ?>;
-      let form = $('#edit-omega-pe').closest('form');
+      let form = $('#'+containerID).closest('form');
       new Vue({
-        el: '#edit-omega-pe',
+        el: '#'+containerID,
         delimiters: ["@{{", "}}"],
         data: {
           data: model,
@@ -411,7 +415,7 @@ if ($point->lastChildReview && $point->lastChildReview->data) {
             $.post(url, dataArray, function(response) {}, 'json');
           },
           _autoSaveForm: function() {
-            let parent = $('#edit-omega-pe').closest('form');
+            let parent = form;
             parent.find('[name="data"]').val(JSON.stringify(this.data));
 
             // autosave on change
@@ -427,7 +431,7 @@ if ($point->lastChildReview && $point->lastChildReview->data) {
 
     }
     window.segmentInitializers.omega_pe = initPE;
-    addMCInitializer('init-pe-{{$note->id}}', initPE, '#edit-omega-pe');
+    addMCInitializer('init-pe-{{$note->id}}', initPE, '#'+containerID);
 
   }).call(window);
 </script>