Handle changing amoutn of elements

src/back/routes/common/horizontal-scroller/horizontal-scroller.stimulus.ts

@@ -12,9 +12,11 @@ export default class HorizontalScroller extends Controller {
 
 	visibility: number[];
 
+	intersectionObservers: IntersectionObserver[];
+
 	connect() {
 		this.visibility = this.elementTargets.map(() => 0);
-		[0, 0.5, 0.9, 1].forEach((threshold) => {
+		this.intersectionObservers = [0, 0.5, 0.9, 1].map((threshold) => {
 			const observer = new IntersectionObserver(
 				(events) => this.handleIntersection(events),
 				{
@@ -23,12 +25,23 @@ export default class HorizontalScroller extends Controller {
 					threshold,
 				}
 			);
-			this.elementTargets.forEach((e) => observer.observe(e));
+			return observer;
 		});
+		this.observe();
 
 		this.refreshMarkers();
 	}
 
+	markerTargetConnected() {
+		this.observe();
+	}
+
+	observe() {
+		this.intersectionObservers?.forEach((observer) =>
+			this.elementTargets.forEach((e) => observer.observe(e))
+		);
+	}
+
 	handleIntersection(events: IntersectionObserverEntry[]) {
 		events.forEach((event) => {
 			const element_index = this.elementTargets.indexOf(