From b198c06564732a5c465301809a23f38e4c924c00 Mon Sep 17 00:00:00 2001
From: Horilla <teamhorilla@gmail.com>
Date: Wed, 17 Jul 2024 15:48:28 +0530
Subject: [PATCH] [UPDT] HORILLA WIDGETS: Multiple Widget not working in same
 form issue

---
 .../horilla_multiselect_widget.html           | 408 +++++++++---------
 .../multiselect_components/nav.html           |  22 +-
 .../multiselect_components/search.html        |  14 +-
 .../multiselect_components/table.html         |  83 ++--
 horilla_widgets/widgets/select_widgets.py     |  15 +-
 5 files changed, 280 insertions(+), 262 deletions(-)

diff --git a/horilla_widgets/templates/horilla_widgets/horilla_multiselect_widget.html b/horilla_widgets/templates/horilla_widgets/horilla_multiselect_widget.html
index f7dd50dc1..5929e5209 100644
--- a/horilla_widgets/templates/horilla_widgets/horilla_multiselect_widget.html
+++ b/horilla_widgets/templates/horilla_widgets/horilla_multiselect_widget.html
@@ -1,213 +1,215 @@
-{% load i18n %}
-<style>
-  .oh-modal__close-custom {
-    border: none;
-    background: none;
-    font-size: 1.5rem;
-    opacity: 0.7;
-    position: absolute;
-    top: 25px;
-    right: 15px;
-    cursor: pointer;
-  }
-  .tag-badge {
-    box-sizing: border-box;
-    display: inline-block;
-    /* background-color: orangered; */
-    color: black;
+<div id="{{section_id}}">
+  {% load i18n %}
+  <style>
+    .oh-modal__close-custom {
+      border: none;
+      background: none;
+      font-size: 1.5rem;
+      opacity: 0.7;
+      position: absolute;
+      top: 25px;
+      right: 15px;
+      cursor: pointer;
+    }
+    .tag-badge {
+      box-sizing: border-box;
+      display: inline-block;
+      /* background-color: orangered; */
+      color: black;
 
-    border-radius: 3rem;
-    text-align: center;
+      border-radius: 3rem;
+      text-align: center;
 
-    font-size: 1.6rem;
-    font-weight: 400;
-    padding: 0.05rem 0.8rem 0.1rem;
-    line-height: inherit;
-    padding: 7px;
-    padding-right: 10px;
-    margin-bottom: 5px;
-    border: solid orangered 2px;
-    cursor: pointer;
-  }
-  .tag-badge--primary {
-    background-color: orangered;
-    color: white;
-  }
-  .oh-profile__avatar-limit-height {
-    height: 30px !important;
-  }
-  .oh-profile_name_custom {
-    font-size: 13px;
-    padding-left: 4px;
-  }
-  .oh-profile__image_custm {
-    width: 26px;
-    height: 26px;
-  }
-  .badge-container {
-    height: 30vh;
-    overflow: auto;
-  }
-  .tag-badge--outline {
-    background: white;
-    border: solid orangered 2px;
-    color: black;
-  }
-  .oh-sticky-table__th--custom {
-    padding-left: 10px !important;
-  }
-  .oh-sticky-table__tr--selected {
-    background: #ff450017 !important;
-  }
+      font-size: 1.6rem;
+      font-weight: 400;
+      padding: 0.05rem 0.8rem 0.1rem;
+      line-height: inherit;
+      padding: 7px;
+      padding-right: 10px;
+      margin-bottom: 5px;
+      border: solid orangered 2px;
+      cursor: pointer;
+    }
+    .tag-badge--primary {
+      background-color: orangered;
+      color: white;
+    }
+    .oh-profile__avatar-limit-height {
+      height: 30px !important;
+    }
+    .oh-profile_name_custom {
+      font-size: 13px;
+      padding-left: 4px;
+    }
+    .oh-profile__image_custm {
+      width: 26px;
+      height: 26px;
+    }
+    .badge-container {
+      height: 30vh;
+      overflow: auto;
+    }
+    .tag-badge--outline {
+      background: white;
+      border: solid orangered 2px;
+      color: black;
+    }
+    .oh-sticky-table__th--custom {
+      padding-left: 10px !important;
+    }
+    .oh-sticky-table__tr--selected {
+      background: #ff450017 !important;
+    }
 
-  .avatars {
-    display: flex;
-    padding: 8px 10px 8px 10px;
-  }
-
-  .avatars__item {
-    background-color: #596376;
-    border: 2px solid white;
-    border-radius: 100%;
-    color: #ffffff;
-    display: block;
-    font-family: sans-serif;
-    font-size: 12px;
-    font-weight: 100;
-    height: 26px;
-    width: 26px;
-    line-height: 17px;
-    text-align: center;
-    transition: margin 0.1s ease-in-out;
-    overflow: hidden;
-    margin-left: -10px;
-  }
-
-  .avatars__item:first-child {
-    z-index: 5;
-  }
-
-  .avatars__item:nth-child(2) {
-    z-index: 4;
-  }
-
-  .avatars__item:nth-child(3) {
-    z-index: 3;
-  }
-
-  .avatars__item:nth-child(4) {
-    z-index: 2;
-  }
-
-  .avatars__item:nth-child(5) {
-    z-index: 1;
-  }
-
-  .avatars__item:last-child {
-    z-index: 0;
-  }
-
-  .avatars__item img {
-    width: 100%;
-  }
-
-  .avatars:hover .avatars__item {
-    margin-right: 10px;
-  }
-  .select2{
-    width: 100% !important;
-  }
-  #slectContainer{{self.attrs.id}} .select2-container .select2-selection{
-    padding: 5px !important;
-    max-height: 70px !important;
-    overflow: hidden;
-    overflow-y: scroll;
-  }
-  .custom-scroll{
-    overflow-x: scroll
-  }
-  .custom-scroll::-webkit-scrollbar{
-    background-color: #cacaca;
-    height: 4px;
-    border-radius: 6px;
-
-  }
-  .custom-scroll::-webkit-scrollbar-thumb{
-    background-color: #888;
-    border-radius: 6px;
-  }
-</style>
-<div id="slectContainer{{self.attrs.id}}">
-  <select name="{{field_name}}" id="{{self.attrs.id}}" {% if required  %}required{% endif %} class="w-100 oh-select oh-select2" multiple>
-    {% for instance in queryset %}
-    <option value="{{instance.id}}">{{instance}}</option>
-    {% endfor %}
-  </select>
-</div>
-<!-- custom scroll/ horizontal scroll section -->
-<div class="d-flex justify-content-between custom-scroll">
-  <div class="avatars" id="avatarsContainer"></div>
-</div>
-<span
-  style="
-    cursor: pointer;
-    padding: 10px;
-    display: flex;
-    justify-content: right;
-    color: orangered;
-  "
->
-  <span
-    data-toggle="oh-modal-toggle"
-    data-target="#filterChoose"
-    title="Filter and Choose {{field.label}}"
-    style="
-      justify-content: right;
-      align-items: center;
+    .avatars {
       display: flex;
-      width: 50px;
+      padding: 8px 10px 8px 10px;
+    }
+
+    .avatars__item {
+      background-color: #596376;
+      border: 2px solid white;
+      border-radius: 100%;
+      color: #ffffff;
+      display: block;
+      font-family: sans-serif;
+      font-size: 12px;
+      font-weight: 100;
+      height: 26px;
+      width: 26px;
+      line-height: 17px;
+      text-align: center;
+      transition: margin 0.1s ease-in-out;
+      overflow: hidden;
+      margin-left: -10px;
+    }
+
+    .avatars__item:first-child {
+      z-index: 5;
+    }
+
+    .avatars__item:nth-child(2) {
+      z-index: 4;
+    }
+
+    .avatars__item:nth-child(3) {
+      z-index: 3;
+    }
+
+    .avatars__item:nth-child(4) {
+      z-index: 2;
+    }
+
+    .avatars__item:nth-child(5) {
+      z-index: 1;
+    }
+
+    .avatars__item:last-child {
+      z-index: 0;
+    }
+
+    .avatars__item img {
+      width: 100%;
+    }
+
+    .avatars:hover .avatars__item {
+      margin-right: 10px;
+    }
+    .select2{
+      width: 100% !important;
+    }
+    #slectContainer{{self.attrs.id}} .select2-container .select2-selection{
+      padding: 5px !important;
+      max-height: 70px !important;
+      overflow: hidden;
+      overflow-y: scroll;
+    }
+    .custom-scroll{
+      overflow-x: scroll
+    }
+    .custom-scroll::-webkit-scrollbar{
+      background-color: #cacaca;
+      height: 4px;
+      border-radius: 6px;
+
+    }
+    .custom-scroll::-webkit-scrollbar-thumb{
+      background-color: #888;
+      border-radius: 6px;
+    }
+  </style>
+  <div id="slectContainer{{self.attrs.id}}">
+    <select name="{{field_name}}" id="{{self.attrs.id}}" {% if required  %}required{% endif %} class="w-100 oh-select oh-select2" multiple>
+      {% for instance in queryset %}
+      <option value="{{instance.id}}">{{instance}}</option>
+      {% endfor %}
+    </select>
+  </div>
+  <!-- custom scroll/ horizontal scroll section -->
+  <div class="d-flex justify-content-between custom-scroll">
+    <div class="avatars" id="avatarsContainer"></div>
+  </div>
+  <span
+    style="
+      cursor: pointer;
+      padding: 10px;
+      display: flex;
+      justify-content: right;
+      color: orangered;
     "
   >
-    <ion-icon name="filter-circle"></ion-icon> {% trans "Filter" %}
-  </span>
-</span>
-<div
-  class="oh-modal"
-  id="filterChoose"
-  role="dialog"
-  aria-labelledby="filterChoose"
-  aria-hidden="true"
->
-  <div class="oh-modal__dialog">
-    <div class="oh-modal__dialog-header">
-      <button
-        type="button"
-        class="oh-modal__close-custom"
-        onclick="event.stopPropagation();event.preventDefault;$('#filterChoose').toggleClass('oh-modal--show');"
-      >
-        <ion-icon name="close-outline"></ion-icon>
-      </button>
-    </div>
-    <div
-      class="oh-modal__dialog-body"
-      id="filterChooseModalBody{{self.attrs.id}}"
+    <span
+      data-toggle="oh-modal-toggle"
+      data-target="#filterChoose{{section_id}}"
+      title="Filter and Choose {{field.label}}"
+      style="
+        justify-content: right;
+        align-items: center;
+        display: flex;
+        width: 50px;
+      "
     >
-      <div class="oh-wrapper">
-        <!-- Nav -->
-        {% include "horilla_widgets/multiselect_components/nav.html" %}
-        <!-- Filter Tags -->
-        {% include "horilla_widgets/multiselect_components/filter_tags.html" %}
-        <!-- Sticky Table -->
-        {% include "horilla_widgets/multiselect_components/table.html" %}
-        <!-- Pagination -->
-        {% include "horilla_widgets/multiselect_components/pagination.html" %}
-        <div class="d-flex flex-row-reverse">
-          <a
-            class="oh-btn oh-btn--secondary oh-btn--shadow pr-3 pl-3"
-            onclick="event.stopPropagation();event.preventDefault;$('#filterChoose').toggleClass('oh-modal--show');"
-          >
-            {% trans "Add" %}
-        </a>
+      <ion-icon name="filter-circle"></ion-icon> {% trans "Filter" %}
+    </span>
+  </span>
+  <div
+    class="oh-modal"
+    id="filterChoose{{section_id}}"
+    role="dialog"
+    aria-labelledby="filterChoose{{section_id}}"
+    aria-hidden="true"
+  >
+    <div class="oh-modal__dialog">
+      <div class="oh-modal__dialog-header">
+        <button
+          type="button"
+          class="oh-modal__close-custom"
+          onclick="event.stopPropagation();event.preventDefault;$('#filterChoose{{section_id}}').toggleClass('oh-modal--show');"
+        >
+          <ion-icon name="close-outline"></ion-icon>
+        </button>
+      </div>
+      <div
+        class="oh-modal__dialog-body"
+        id="filterChooseModalBody{{self.attrs.id}}"
+      >
+        <div class="oh-wrapper">
+          <!-- Nav -->
+          {% include "horilla_widgets/multiselect_components/nav.html" %}
+          <!-- Filter Tags -->
+          {% include "horilla_widgets/multiselect_components/filter_tags.html" %}
+          <!-- Sticky Table -->
+          {% include "horilla_widgets/multiselect_components/table.html" %}
+          <!-- Pagination -->
+          {% include "horilla_widgets/multiselect_components/pagination.html" %}
+          <div class="d-flex flex-row-reverse">
+            <a
+              class="oh-btn oh-btn--secondary oh-btn--shadow pr-3 pl-3"
+              onclick="event.stopPropagation();event.preventDefault;$('#filterChoose{{section_id}}').removeClass('oh-modal--show');"
+            >
+              {% trans "Add" %}
+          </a>
+          </div>
         </div>
       </div>
     </div>
diff --git a/horilla_widgets/templates/horilla_widgets/multiselect_components/nav.html b/horilla_widgets/templates/horilla_widgets/multiselect_components/nav.html
index 80434305d..2a7401a39 100644
--- a/horilla_widgets/templates/horilla_widgets/multiselect_components/nav.html
+++ b/horilla_widgets/templates/horilla_widgets/multiselect_components/nav.html
@@ -85,9 +85,9 @@
       return modifiedJson;
     }
 
-    $("#widgetFilterButton{{self.attrs.id}}").click(function (e) {
+    $("#{{section_id}} #widgetFilterButton{{self.attrs.id}}").click(function (e) {
       e.preventDefault();
-      const formFields = $("#widgetFilterFormContainer{{self.attrs.id}}").find(
+      const formFields = $("#{{section_id}} #widgetFilterFormContainer{{self.attrs.id}}").find(
         "[name]"
       );
       var formData = [];
@@ -103,25 +103,25 @@
         data: formData,
         success: function (response) {
           let ids = response.ids;
-          $("#chooseTableHeaderParent .oh-sticky-table__tbody").hide();
+          $("#{{section_id}} #chooseTableHeaderParent .oh-sticky-table__tbody").hide();
           $.each(ids, function (indexInArray, valueOfElement) {
             $(
-              `#chooseTableHeaderParent .oh-sticky-table__tbody[data-instance-id=${valueOfElement}]`
+              `#{{section_id}} #chooseTableHeaderParent .oh-sticky-table__tbody[data-instance-id=${valueOfElement}]`
             ).show();
           });
-          $(".visible-count").html(
-            $(".oh-sticky-table__tr--custom:visible .oh-sticky-table__sd")
+          $("#{{section_id}} .visible-count").html(
+            $("#{{section_id}} .oh-sticky-table__tr--custom:visible .oh-sticky-table__sd")
               .length
           );
           var labeledTags = transformJson(formData);
-          var tagContainer = $("#filterTagContainer{{self.attrs.id}}");
+          var tagContainer = $("#{{section_id}} #filterTagContainer{{self.attrs.id}}");
           tagContainer.html("");
           $.each(labeledTags, function (indexInArray, valueOfElement) {
             if (valueOfElement.value.length != 0) {
               tagContainer.append(
                 $(`
                 <span class="oh-filter-tag" id="tag-{{self.attrs.id}}"
-                  >${valueOfElement.name}<button class="oh-filter-tag__close" onclick="closeFilterTag(event, ${formData[indexInArray].name}, '#tag-{{self.attrs.id}}')">
+                  >${valueOfElement.name}<button class="oh-filter-tag__close" onclick="closeFilterTag(event, ${formData[indexInArray].name}, '#{{section_id}} #tag-{{self.attrs.id}}')">
                     <ion-icon name="close-outline"></ion-icon></button
                   >
                 </span>`)
@@ -131,9 +131,9 @@
         },
       });
     });
-    $("#widgetFilterFormContainer{{self.attrs.id}} [name=search]").keyup(
+    $("#{{section_id}} #widgetFilterFormContainer{{self.attrs.id}} [name=search]").keyup(
       function (e) {
-        $("#widgetFilterButton{{self.attrs.id}}").click();
+        $("#{{section_id}} #widgetFilterButton{{self.attrs.id}}").click();
       }
     );
   });
@@ -146,7 +146,7 @@
         .find(`#select2-${$(fieldName).attr("id")}-container`)
         .html("---------");
     }
-    $("#widgetFilterButton{{self.attrs.id}}").click();
+    $("#{{section_id}} #widgetFilterButton{{self.attrs.id}}").click();
     $(targetTag).remove();
   }
 </script>
diff --git a/horilla_widgets/templates/horilla_widgets/multiselect_components/search.html b/horilla_widgets/templates/horilla_widgets/multiselect_components/search.html
index 17b701634..2c65db4ea 100644
--- a/horilla_widgets/templates/horilla_widgets/multiselect_components/search.html
+++ b/horilla_widgets/templates/horilla_widgets/multiselect_components/search.html
@@ -38,23 +38,23 @@
 <script>
   $(document).ready(function () {
     function updateSelectedCount(){
-        let selectedCount = $(".tag-badge").not(".tag-badge--outline").length
-        $(".selected-count").html(selectedCount);
+        let selectedCount = $("#{{section_id}} .tag-badge").not(".tag-badge--outline").length
+        $("#{{section_id}} .selected-count").html(selectedCount);
     }
-    $(".tag-badge").click(function (e) {
+    $("#{{section_id}} .tag-badge").click(function (e) {
       e.preventDefault();
       $(this).toggleClass("tag-badge--outline");
       updateSelectedCount()
     });
-    $("#selectSelected").click(function (e) {
+    $("#{{section_id}} #selectSelected").click(function (e) {
         e.preventDefault();
-        $(".tag-badge").removeClass("tag-badge--outline");
+        $("#{{section_id}} .tag-badge").removeClass("tag-badge--outline");
         updateSelectedCount()
     });
 
-    $("#unselectSelected").click(function (e) {
+    $("#{{section_id}} #unselectSelected").click(function (e) {
         e.preventDefault();
-        $(".tag-badge").addClass("tag-badge--outline");
+        $("#{{section_id}} .tag-badge").addClass("tag-badge--outline");
         updateSelectedCount()
     });
   });
diff --git a/horilla_widgets/templates/horilla_widgets/multiselect_components/table.html b/horilla_widgets/templates/horilla_widgets/multiselect_components/table.html
index 4cf96d83d..3cc59eaa1 100644
--- a/horilla_widgets/templates/horilla_widgets/multiselect_components/table.html
+++ b/horilla_widgets/templates/horilla_widgets/multiselect_components/table.html
@@ -61,15 +61,15 @@
 <script>
   let selectedIds = [];
   $(document).ready(function () {
-    $("#{{self.attrs.id}}").select2({
+    $("#{{section_id}} #{{self.attrs.id}}").select2({
       multiple: true,
     });
-    $("#{{self.attrs.id}}")
+    $("#{{section_id}} #{{self.attrs.id}}")
       .next()
       .find(".select2-container")
       .css("width", "100%");
 
-    $("#chooseTableHeader")
+    $("#{{section_id}} #chooseTableHeader")
       .not("[type=checkbox]")
       .click(function (e) {
         e.preventDefault();
@@ -78,33 +78,33 @@
         } else {
           $(this).find("[type=checkbox]:first").prop("checked", true);
         }
-        $("#choose-all-user").change();
+        $("#{{section_id}} #choose-all-user").change();
       });
-    $("#selectAllUsers").click(function (e) {
+    $("#{{section_id}} #selectAllUsers").click(function (e) {
       e.preventDefault();
-      $("#choose-all-user").prop("checked", true);
-      $("#choose-all-user").change();
+      $("#{{section_id}} #choose-all-user").prop("checked", true);
+      $("#{{section_id}} #choose-all-user").change();
     });
-    $("#unselectAllUsers").click(function (e) {
+    $("#{{section_id}} #unselectAllUsers").click(function (e) {
       e.preventDefault();
-      $("#choose-all-user").prop("checked", false);
-      $("#choose-all-user").change();
+      $("#{{section_id}} #choose-all-user").prop("checked", false);
+      $("#{{section_id}} #choose-all-user").change();
     });
-    $("#choose-all-user").change(function (e) {
+    $("#{{section_id}} #choose-all-user").change(function (e) {
       e.preventDefault();
       if ($(this).is(":checked")) {
-        $(".all-choose-user-row:visible").prop("checked", true);
-        $(".oh-sticky-table__tr--custom:visible .oh-sticky-table__sd").addClass(
+        $("#{{section_id}} .all-choose-user-row:visible").prop("checked", true);
+        $("#{{section_id}} .oh-sticky-table__tr--custom:visible .oh-sticky-table__sd").addClass(
           "oh-sticky-table__tr--selected"
         );
       } else {
-        $(".all-choose-user-row:visible").prop("checked", false);
+        $("#{{section_id}} .all-choose-user-row:visible").prop("checked", false);
         $(
-          ".oh-sticky-table__tr--custom:visible .oh-sticky-table__sd"
+          "#{{section_id}} .oh-sticky-table__tr--custom:visible .oh-sticky-table__sd"
         ).removeClass("oh-sticky-table__tr--selected");
       }
     });
-    $(".oh-sticky-table__tr--custom").click(function (e) {
+    $("#{{section_id}} .oh-sticky-table__tr--custom").click(function (e) {
       var checkbox = $(this).find("[type=checkbox]");
 
       // Toggle the checkbox's checked state
@@ -125,9 +125,9 @@
         return !checked;
       });
     });
-    $("#filterChoose").click(function (e) {
+    $("#{{section_id}} #filterChoose{{section_id}}").click(function (e) {
       e.preventDefault();
-      var selectedRows = $("#filterChoose div").find(
+      var selectedRows = $("#{{section_id}} #filterChoose{{section_id}} div").find(
         ".oh-sticky-table__tr--selected"
       );
       var ids = [];
@@ -139,44 +139,44 @@
         instanceData.push({ id: id, label: label });
       });
       var selectedCount = selectedRows.length;
-      $(".selected-count").html(selectedCount);
+      $("#{{section_id}} .selected-count").html(selectedCount);
 
-      $("#{{self.attrs.id}}").val(ids);
-      $("#{{self.attrs.id}}").change();
-      $("#avatarsContainer").html("");
+      $("#{{section_id}} #{{self.attrs.id}}").val(ids);
+      $("#{{section_id}} #{{self.attrs.id}}").change();
+      $("#{{section_id}} #avatarsContainer").html("");
       $.each(instanceData, function (indexInArray, valueOfElement) {
         var imgUrl = $(
-          `.oh-sticky-table__tr.oh-sticky-table__tr--custom[data-instance-id=${valueOfElement.id}]`
+          `#{{section_id}} .oh-sticky-table__tr.oh-sticky-table__tr--custom[data-instance-id=${valueOfElement.id}]`
         ).attr("data-avatar");
-        $("#avatarsContainer").append(
+        $("#{{section_id}} #avatarsContainer").append(
           $(
             `<a href="#" class="avatars__item" title="${valueOfElement.label}"><img class="avatar" src="${imgUrl}" alt=""></a>`
           )
         );
       });
     });
-    $("#selectAllInstances").click(function (e) {
+    $("#{{section_id}} #selectAllInstances").click(function (e) {
       e.preventDefault();
-      $("#choose-all-user").prop("checked", true);
-      $(".all-choose-user-row").prop("checked", true);
-      $(".oh-sticky-table__tr--custom .oh-sticky-table__sd").addClass(
+      $("#{{section_id}} #choose-all-user").prop("checked", true);
+      $("#{{section_id}} .all-choose-user-row").prop("checked", true);
+      $("#{{section_id}} .oh-sticky-table__tr--custom .oh-sticky-table__sd").addClass(
         "oh-sticky-table__tr--selected"
       );
-      $("#choose-all-user").change();
+      $("#{{section_id}} #choose-all-user").change();
     });
-    $("#{{ self.attrs.id }}").change(function (e) {
+    $("#{{section_id}} #{{ self.attrs.id }}").change(function (e) {
       e.preventDefault();
 
       // Get all selected options
-      $("#avatarsContainer").html("");
-      $(".oh-sticky-table__tr--selected")
+      $("#{{section_id}} #avatarsContainer").html("");
+      $("#{{section_id}} .oh-sticky-table__tr--selected")
         .find("[type=checkbox]")
         .prop("checked", false);
-      $(".oh-sticky-table__tr--selected").removeClass(
+      $("#{{section_id}} .oh-sticky-table__tr--selected").removeClass(
         "oh-sticky-table__tr--selected"
       );
       var selectedOptions = $(this).find(`:selected`);
-      $(".selected-count").html(selectedOptions.length);
+      $("#{{section_id}} .selected-count").html(selectedOptions.length);
 
       // Loop through the selected options
       selectedOptions.each(function (indexInArray, valueOfElement) {
@@ -184,28 +184,31 @@
         var optionHtml = $(this).html();
         // Append the selected option's HTML to the avatarsContainer
         var imgUrl = $(
-          `.oh-sticky-table__tr.oh-sticky-table__tr--custom[data-instance-id=${$(
+          `#{{section_id}} .oh-sticky-table__tr.oh-sticky-table__tr--custom[data-instance-id=${$(
             valueOfElement
           ).val()}]`
         ).attr("data-avatar");
-        $("#avatarsContainer").append(
+        $("#{{section_id}} #avatarsContainer").append(
           $(
             `<a href="#" class="avatars__item" title="${optionHtml}"><img class="avatar" src="${imgUrl}" alt=""></a>`
           )
         );
         var optValue = $(valueOfElement).val();
-        var rowId = "#selectRow{{self.attrs.id}}" + optValue;
+        var rowId = "#{{section_id}} #selectRow{{self.attrs.id}}" + optValue;
         $(rowId).addClass("oh-sticky-table__tr--selected");
         $(rowId).find("[type=checkbox]").prop("checked", true);
       });
     });
+    {% if initial %}
+      $('#{{section_id}} #slectContainer{{self.attrs.id}}').find("[name={{field_name}}]").val({{initial|safe}}).change()
+    {% endif %}
   });
-  $("#choose-all-user").click(function (e) {
+  $("#{{section_id}} #choose-all-user").click(function (e) {
     setTimeout(() => {
-      $("#choose-all-user").closest(".oh-sticky-table__th--custom")[0].click()
+      $("#{{section_id}}  #choose-all-user").closest(".oh-sticky-table__th--custom")[0].click()
     }, 2);
   });
-  $(".all-choose-user-row").click(function (e) {
+  $("#{{section_id}} .all-choose-user-row").click(function (e) {
     e.preventDefault();
     setTimeout(() => {
       $(this).closest(".oh-sticky-table__tr--custom")[0].click()
diff --git a/horilla_widgets/widgets/select_widgets.py b/horilla_widgets/widgets/select_widgets.py
index b5f9e7db1..bf859790c 100644
--- a/horilla_widgets/widgets/select_widgets.py
+++ b/horilla_widgets/widgets/select_widgets.py
@@ -4,7 +4,7 @@ select_widgets.py
 This module is used to write horilla form select widgets
 """
 
-import datetime
+import uuid
 
 from django import forms
 
@@ -13,6 +13,14 @@ from horilla import horilla_middlewares
 ALL_INSTANCES = {}
 
 
+def get_short_uuid(length: int, prefix: str = "widget"):
+    """
+    Short uuid generating method
+    """
+    uuid_str = str(uuid.uuid4().hex)
+    return prefix + str(uuid_str[:length]).replace("-", "")
+
+
 class HorillaMultiSelectWidget(forms.Widget):
     """
     HorillaMultiSelectWidget
@@ -47,6 +55,9 @@ class HorillaMultiSelectWidget(forms.Widget):
         field = self.choices.field
         context["queryset"] = queryset
         context["field_name"] = name
+        if self.instance and self.instance.pk:
+            initial = list(getattr(self.instance, name).values_list("id", flat=True))
+            context["initial"] = initial
         context["field"] = field
         context["self"] = self
         context["filter_template_path"] = self.filter_template_path
@@ -55,6 +66,8 @@ class HorillaMultiSelectWidget(forms.Widget):
         self.attrs["id"] = (
             ("id_" + name) if self.attrs.get("id") is None else self.attrs.get("id")
         )
+        uid = get_short_uuid(5)
+        context["section_id"] = uid
         context[self.filter_instance_contex_name] = self.filter_class
         request = getattr(horilla_middlewares._thread_locals, "request", None)
         ALL_INSTANCES[str(request.user.id)] = self