state-add-this-selectedcolorid.diff

diff --git a/assets/controllers/color-square_controller.js b/assets/controllers/color-square_controller.js
index 91e6872..461e119 100644
--- a/assets/controllers/color-square_controller.js
+++ b/assets/controllers/color-square_controller.js
@@ -1,6 +1,8 @@
 import { Controller } from 'stimulus';
 
 export default class extends Controller {
+    selectedColorId = null;
+
     static targets = ['colorSquare', 'select']
 
     connect() {
@@ -8,11 +10,14 @@ export default class extends Controller {
     }
 
     selectColor(event) {
+        const clickedColorId = event.currentTarget.dataset.colorId;
+        this.selectedColorId = clickedColorId;
+
         this.colorSquareTargets.forEach((element) => {
             element.classList.remove('selected');
         });
 
         event.currentTarget.classList.add('selected');
-        this.selectTarget.value = event.currentTarget.dataset.colorId;
+        this.selectTarget.value = this.selectedColorId;
     }
 }