Made all the elements id s unique, so that a Setting and its html gui can be...

Made all the elements id s unique, so that a Setting and its html gui can be instantiated many times

yafitsv/public/javascript/olqv_settings.js

 class Settings {
   constructor(viewer) {
+    this.LUTSelectorId="LUTSelector"+"_"+viewer.getDivId();
+    this.ITTSelectorId="ITTSelector"+"_"+viewer.getDivId();
+    this.VideoModeSelectorId="VideoModeSelector"+"_"+viewer.getDivId();
+    this.applyId="apply-settings"+"_"+viewer.getDivId();
     this.html = `
 <div id="ModalSettingsForm" class="modal fade">
   <div class="modal-dialog" role="document">
@@ -11,24 +15,24 @@ class Settings {
         <ul class="list-group list-group-horizontal">
           <li class="list-group-item ">
             <label for="LUTSelector">LUTs</label>
-            <select name="LUTs" class="form-control" id="LUTSelector">
+            <select name="LUTs" class="form-control" id="${this.LUTSelectorId}">
             </select>
           </li>
 
           <li class="list-group-item ">
             <label for="ITTSelector">ITTs</label>
-            <select class="form-control" id="ITTSelector">
+            <select class="form-control" id="${this.ITTSelectorId}">
             </select>
           </li>
 
           <li class="list-group-item ">
             <label for="VideoModeSelector">Video mode</label>
-            <select class="form-control" id="VideoModeSelector">
+            <select class="form-control" id="${this.VideoModeSelectorId}">
             </select>
           </li>
 
           <li class="list-group-item">
-            <a class="form-control" id="rccap" class="btn btn-primary" href="#" role="button">Apply</a>
+            <a class="form-control" id="${this.applyId}" class="btn btn-primary" href="#" role="button">Apply</a>
           </li>
         </ul>
       </div>
@@ -50,19 +54,47 @@ class Settings {
     this.button.appendChild(x);
   }
 
+  setLUTSelectorIndex(index){
+    $("#"+this.LUTSelectorId).prop('selectedIndex', index); 
+  }
+
+  get selectedLUT(){
+    return $('#'+this.LUTSelectorId).find(':selected').text().trim();
+  }
+
+  setITTSelectorIndex(index) {
+    $("#" + this.ITTSelectorId).prop('selectedIndex', index);
+  }
+
+  get selectedITT(){
+    return $("#" + this.ITTSelectorId).find(':selected').text().trim();
+  }
+
+  setVideoModeSelectorIndex(index){
+    $("#" + this.VideoModeSelectorId).prop('selectedIndex', index);   
+  }
+
+  get selectedVideoMode(){
+    return $("#" + this.VideoModeSelectorId).find(':selected').text().trim();
+  }
+
+  get applyBtn() {
+    return $("#"+this.applyId);
+  }
+
   getButton() {
     return this.button;
   }
 
-  setLUT(name) {
-    $('#LUTSelector').append(`<option>${name}</option>`);
+  appendLUT(name) {
+    $('#' + this.LUTSelectorId).append(`<option>${name}</option>`);
   }
 
-  setITT(name) {
-    $('#ITTSelector').append(`<option>${name}</option>`);
+  appendITT(name) {
+    $('#' + this.ITTSelectorId).append(`<option>${name}</option>`);
   }
 
-  setVM(name) {
-    $('#VideoModeSelector').append(`<option>${name}</option>`);
+  appendVM(name) {
+    $('#' + this.VideoModeSelectorId).append(`<option>${name}</option>`);
   }
 }; // End of class Settings
\ No newline at end of file