Almost working edit button

views/partials/message-user.html

@@ -15,7 +15,7 @@
                         </p>
                     </div>
                     <div class="message-body">
-                        <div class="content" style="overflow-x: auto;">
+                        <div class="content" style="overflow-x: auto;" id="content-{{ ID }}">
                             {{ Content|safe }}
                         </div>
                     </div>
@@ -27,7 +27,8 @@
                         <i class="fa-solid fa-arrows-rotate"></i>
                     </span>
                 </button>
-                <button id="edit-button-{{ ID }}" class="button is-small is-primary message-button is-outlined mr-2">
+                <button hx-get="/editMessageForm?id={{ ID }}" hx-target="#content-{{ ID }}" id="edit-button-{{ ID }}"
+                    class="button is-small is-primary message-button is-outlined mr-5">
                     <span class="icon">
                         <i class="fa-solid fa-pen"></i>
                     </span>
@@ -41,15 +42,4 @@
             </div>
         </div>
     </div>
-</div>
-
-<style>
-    .message-button {
-        opacity: 0;
-        transition: opacity 0.3s ease;
-    }
-
-    .message-user:hover .message-button {
-        opacity: 1;
-    }
-</style>
+</div>