diff --git a/lib/active_hashcash.rb b/lib/active_hashcash.rb
index 2a11d3a..afbad52 100644
--- a/lib/active_hashcash.rb
+++ b/lib/active_hashcash.rb
@@ -83,8 +83,16 @@ def hashcash_after_success
 
   # Call it inside the form that have to be protected and don't forget to initialize the JavaScript Hascash.setup().
   # Unless you need something really special, you should not need to override this method.
-  def hashcash_hidden_field_tag(name = :hashcash)
-    options = {resource: hashcash_resource, bits: hashcash_bits, waiting_message: hashcash_waiting_message}
-    view_context.hidden_field_tag(name, "", "data-hashcash" => options.to_json)
+  def hashcash_hidden_field_tag(name = :hashcash, **html_attributes)
+    options = {
+      resource: hashcash_resource,
+      bits: hashcash_bits,
+      waiting_message: hashcash_waiting_message
+    }
+    html_attributes[:id] ||= "hashcash_#{SecureRandom.hex(4)}"
+    html_attributes["data-hashcash"] ||= options.to_json
+    html_attributes["data-controller"] ||= "hashcash"
+
+    view_context.hidden_field_tag(name, "", **html_attributes)
   end
 end
diff --git a/lib/hashcash.js b/lib/hashcash.js
index 0006fa7..f2f7156 100644
--- a/lib/hashcash.js
+++ b/lib/hashcash.js
@@ -14,7 +14,7 @@ Hashcash = function(input) {
 
 Hashcash.setup = function() {
   if (document.readyState != "loading") {
-    var input = document.querySelector("input#hashcash")
+    var input = document.querySelector("input[id^=hashcash]")
     input && new Hashcash(input)
   } else
     document.addEventListener("DOMContentLoaded", Hashcash.setup )