You can now indicate that you have completed something and add evidence but the update doesn't yet work and it will need refatoring because we need to get back to the CAF or company.

app/controllers/subprincipleitems_controller.rb

@@ -0,0 +1,28 @@
+class SubprincipleitemsController < ApplicationController
+    before_action :set_subprincipleitem, only: %i[ edit update ]
+
+    def edit
+    end
+
+    def update
+        respond_to do |format|
+            if @subprincipleitem.update(subprincipleitem_params)
+                format.html { redirect_to company_url(@company), notice: "Company was successfully updated." }
+                format.json { render :show, status: :ok, location: @company }
+            else
+                format.html { render :edit, status: :unprocessable_entity }
+                format.json { render json: @company.errors, status: :unprocessable_entity }
+            end
+        end
+    end
+
+    private
+        def set_subprincipleitem
+            @subprincipleitem = Subprincipleitem.find(params[:id])
+        end
+
+        # Only allow a list of trusted parameters through.
+        def subprincipleitem_params
+            params.require(:subprincipleitem).permit(:affirmative)
+        end
+end

app/javascript/application.js

@@ -1,12 +1,6 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
-import "jquery";
 import "@hotwired/turbo-rails";
-//import "controllers";
-import Trix from "trix";
-import "@rails/actiontext";
-
-window.importmapScriptsLoaded = true;
-
+import "controllers";
 
 import "trix"
 import "@rails/actiontext"

app/javascript/controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+export { application }

app/javascript/controllers/hello_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.textContent = "Hello World!"
+  }
+}

app/javascript/controllers/index.js

@@ -0,0 +1,11 @@
+// Import and register all your controllers from the importmap under controllers/*
+
+import { application } from "controllers/application"
+
+// Eager load all controllers defined in the import map under controllers/**/*_controller
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)
+
+// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
+// import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
+// lazyLoadControllersFrom("controllers", application)

app/views/cafs/_caf.html.erb

@@ -27,7 +27,9 @@
           <% subprinciple.subprincipleitemgroups.each do |subprincipleitemgroup| %>
             <td>
             <% subprincipleitemgroup.subprincipleitems.each do |subprincipleitem| %>
-              <div id="<%= "subprincipleitemid_#{subprincipleitem.id}" %>" class="subprincipleitem"><%= subprincipleitem.description %></div>
+              <div style="background-color:<%= subprincipleitem.affirmative ? '#05aa05' : '#aa3030'  %>;" id="<%= "subprincipleitemid_#{subprincipleitem.id}" %>" class="subprincipleitem"><%= subprincipleitem.description %><%= link_to "Change", edit_subprincipleitem_path(subprincipleitem) %>
+              </div>
+
             <% end %>
             </td>
           <% end %>
@@ -40,31 +42,4 @@
   <% end %>
 <% end %>
 
-<script type="text/javascript">
 
-// Guard against double DOM loads
-// https://stackoverflow.com/questions/71876873/rails-7-7-0-2-3-importmap-jquery-is-not-defined-in-view
-var codeExecuted = false;
-
-document.addEventListener('DOMContentLoaded', function(e) {
-
-  // Check if importmap stuff exisits without throwing an error.
-  // Then run main code w/ guard against multiple executions.
-  if ("importmapScriptsLoaded" in window) {
-
-    if (!codeExecuted) {
-      // Main code here
-      console.log($('#hello'));
-
-          $(".subprincipleitem").click(function(event) {
-            alert(event.target.id);
-          });
-
-
-      // Don't forget to bump guard for one-time only JS execution !!
-      codeExecuted = true;
-    };
-  };
-
-});
-</script>

app/views/subprincipleitems/edit.html.erb

@@ -0,0 +1,17 @@
+<h1><%= @subprincipleitem.subprincipleitemgroup.subprinciple.name%></h1>
+<p><%= @subprincipleitem.subprincipleitemgroup.subprinciple.description%></p>
+
+<p><%= @subprincipleitem.description %><p>
+
+<%= form_with(model: @subprincipleitem) do |form| %>
+    <div>
+        <%= form.label :affirmative %> <%= form.check_box :affirmative, {}, true, false %>
+    </div>
+    <div>
+        <%= form.label :evidence %>
+        <%= form.rich_text_area :evidence %>
+    </div>
+    <div>
+        <%= form.submit %>
+    </div>
+<% end %>