Use data targets rather than id lookup, so that coupling is explicit

app/javascript/controllers/soft_validations_controller.js

@@ -1,10 +1,12 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
+  static targets = [ "override" ]
+
   initialize() {
     let url = window.location.href + "/soft_validations"
     let xhr = new XMLHttpRequest()
-    let div = document.getElementById("soft-validations")
+    let div = this.overrideTarget
     xhr.open("GET", url, true)
     xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
     xhr.onreadystatechange = function () {

app/views/form/_validation_override_question.html.erb

@@ -1,8 +1,11 @@
-<div id="soft-validations" class="govuk-form-group govuk-form-group--error" style='display:none;'>
+<div class="govuk-form-group govuk-form-group--error"
+     data-controller="soft-validations"
+     data-soft-validations-target="override"
+     style='display:none;'>
+
   <%= f.govuk_check_boxes_fieldset page_info["soft_validations"]&.keys&.first,
       legend: { text: "soft-validations-placeholder-message", size: "l" },
-      hint: { text: "soft-validations-placeholder-hint-text" },
+      hint: { text: "soft-validations-placeholder-hint-text" } do %>
-      form_group: { "data-controller": "soft-validations" } do %>
 
       <%= f.govuk_check_box page_info["soft_validations"]&.keys&.first, page_info["soft_validations"]&.keys&.first,
         label: { text: "Yes" }