When you hover a chip, highlight all the other chips about that bubble for that day

app/javascript/controllers/related_element_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static classes = ["highlight"]
+  
+  highlight(event) {
+    const targetElement = event.target.closest('[data-related-element-target]')
+    if (!targetElement) return
+    
+    const targetValue = targetElement.dataset.relatedElementTarget
+    const relatedElements = this.element.querySelectorAll(`[data-related-element-target="${targetValue}"]`)
+    
+    relatedElements.forEach(element => {
+      element.classList.add(this.highlightClass)
+    })
+  }
+
+  unhighlight(event) {
+    const targetElement = event.target.closest('[data-related-element-target]')
+    if (!targetElement) return
+    
+    const targetValue = targetElement.dataset.relatedElementTarget
+    const relatedElements = this.element.querySelectorAll(`[data-related-element-target="${targetValue}"]`)
+    
+    relatedElements.forEach(element => {
+      element.classList.remove(this.highlightClass)
+    })
+  }
+}