do proper things in ui @ new log

frontend/main.ts

@@ -62,20 +62,8 @@ function selectBoatChange() {
         }
       }
     } as any);
-  
-    choiceObjects[boatSelect.id] = boatChoice;
-  }
 
-  const shipmasterSelect = <HTMLSelectElement>document.querySelector('#shipmaster');
-  if(shipmasterSelect) {
-    const shipmasterChoice = new Choices(shipmasterSelect, {
-      loadingText: 'Wird geladen...',
-      noResultsText: 'Keine Ergebnisse gefunden',
-      noChoicesText: 'Keine Ergebnisse gefunden',
-      itemSelectText: 'Zum Auswählen klicken',
-    });
-    
-    choiceObjects[shipmasterSelect.id] = shipmasterChoice;
+    choiceObjects[boatSelect.id] = boatChoice;
   }
 }
 
@@ -180,6 +168,16 @@ function initChoices() {
   }
 }
 
+interface ChoiceEvent extends Event{
+  detail: {
+    value: string; 
+    label: string,
+    customProperties: {
+	is_cox: boolean,
+    }
+  };
+}
+
 function initNewChoice(select: HTMLInputElement) {
   const choice = new Choices(select, {
     removeItemButton: true,
@@ -194,9 +192,50 @@ function initNewChoice(select: HTMLInputElement) {
     },
   });
 
+    select.addEventListener('addItem', function(e) {
+	const event = e as ChoiceEvent;
+	const user_id = event.detail.value;
+	const name = event.detail.label;
+
+	if (event.detail.customProperties.is_cox) {
+		const coxSelect = <HTMLSelectElement>document.querySelector('#cox');
+		if (coxSelect){
+			coxSelect.add(new Option(name, user_id));
+		}
+	}
+
+	const steeringSelect = <HTMLSelectElement>document.querySelector('#steering_person');
+	if (steeringSelect) {
+		steeringSelect.add(new Option(name, user_id));   
+	}
+    },false);
+
+	select.addEventListener('removeItem', function(e) {
+		const event = e as ChoiceEvent;
+
+		const user_id = event.detail.value;
+
+		const coxSelect = <HTMLSelectElement>document.querySelector('#cox');
+		if (coxSelect) {
+			for (var i=0; i<coxSelect.length; i++) {
+	    			if (coxSelect.options[i].value == user_id)
+	        			coxSelect.remove(i);
+			}
+		}
+
+		const steeringSelect = <HTMLSelectElement>document.querySelector('#steering_person');
+		if (steeringSelect) {
+			for (var i=0; i<steeringSelect.length; i++) {
+	    			if (steeringSelect.options[i].value == user_id)
+	        			steeringSelect.remove(i);
+			}
+		}
+	},false);
+
   choiceObjects[select.id] = choice;
 }
 
+
 function initToggle() {
   // get filter btns & set object sessionStorage
   const btns = <NodeListOf<HTMLButtonElement>>document.querySelectorAll('.filter-trips-js');