diff --git a/.gitignore b/.gitignore
index 4decef1..892b473 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,4 +10,4 @@ Thumbs.db
 
 # Files
 package-lock.json
-npm-debug.log
+npm-debug.log
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..1b75e51
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,19 @@
+## Changes
+
+### [1.3.3] - 2021-11-06
+- Fixes problem with the toggle button by adding the attribute `type="button"` to the jQuery version of the script.
+
+### [1.3.2] - 2021-11-06
+- Added script working with jQuery or Cash.
+
+### [1.3.1] - 2021-10-31
+- Fixes the problem that autofill hides the toggle icon.
+- Added the `aria-pressed` attribute.
+- Updated the demos ([Bootstrap 4](https://coliff.github.io/bootstrap-show-password-toggle/tests/bootstrap4-sign-in/), [Bootstrap 5](https://coliff.github.io/bootstrap-show-password-toggle/tests/bootstrap5-sign-in/))
+
+### [1.3.0] - 2021-10-30
+- Works with multiple `input[type=password]`.
+- The `aria-label` of the toggle button can be customized adding `data-show` and `data-hide` attributes to the password input.
+- The toggle button is added by JavaScript, remove existing `<button>` tags.
+- The toggle button works more stable.
+- The toggle button is always visible.
diff --git a/README.md b/README.md
index a06e109..cca0963 100644
--- a/README.md
+++ b/README.md
@@ -33,22 +33,25 @@ A show password as text toggle for Bootstrap forms
 
 ```html
 <div class="input-group">
-  <input type="password" class="form-control rounded" required>
-  <button id="toggle-password" type="button" class="d-none"
-    aria-label="Show password as plain text. Warning: this will display your password on the screen.">
-  </button>
+  <input type="password"
+         class="form-control rounded"
+         required
+         data-show="Show password as plain text."
+         data-hide="Hide password."
+  >
 </div>
 ```
 
-3. Load the `show-password-toggle.js` after the form
+3. Load the `show-password-toggle.min.js` after the form
 
-I highly recommend adding the attributes: `spellcheck="false"`, `autocorrect="off"` and `autocapitalize="off"` to the password input so that when the password is displayed in plain text the input is not auto-corrected, capitalized or spellchecked (to avoid red squiggly line underneath).
+I highly recommend adding the attributes: `spellcheck="false"` and `autocapitalize="off"` to the password input so that when the password is displayed in plain text the input is not auto-corrected, capitalized or spellchecked (to avoid red squiggly line underneath).
 
-You should also add `name="current-password"` and `autocomplete="current-password"` to help browsers autocomplete the form.
+You should also add `id="current-password"` and `autocomplete="current-password"` to help browsers autocomplete the form.
 
 ## Demo
 
 - [Bootstrap 4 Demo](https://coliff.github.io/bootstrap-show-password-toggle/tests/bootstrap4-sign-in/)
+- [Bootstrap 4 Demo with jQuery](https://coliff.github.io/bootstrap-show-password-toggle/tests/bootstrap4-jquery-sign-in/)
 - [Bootstrap 5 Demo](https://coliff.github.io/bootstrap-show-password-toggle/tests/bootstrap5-sign-in/)
 
 ## Browser Support
@@ -63,8 +66,7 @@ A. You could change the icon displayed by replacing the `.input-password[type="p
 
 ## Known Issues
 
-- If the browser autofills the password input then the user-agent will apply `background-image: none !important`.
-- The password input requires the use of the `required` attribute. This is so the background-image is not displayed when the input is empty. (It'd be great if browsers supported the [:blank](https://developer.mozilla.org/en-US/docs/Web/CSS/:blank) or [:empty](https://developer.mozilla.org/en-US/docs/Web/CSS/:empty) pseudo-selectors!)
+- For browsers without [Element.after()](https://developer.mozilla.org/en-US/docs/Web/API/Element/after#browser_compatibility) load `show-password-toggle-jquery.min.js` instead. jQuery or Cash needs to be loaded before.
 
 ## Credits and Thanks
 
diff --git a/css/show-password-toggle.css b/css/show-password-toggle.css
index 7365857..3d965b7 100644
--- a/css/show-password-toggle.css
+++ b/css/show-password-toggle.css
@@ -2,40 +2,32 @@
   display: none;
 }
 
-button#toggle-password {
+button.toggle-password {
   position: absolute;
   top: 3px;
   right: 4px;
   z-index: 9;
   width: 28px;
   height: 30px;
-  background: 0;
+  background-color: transparent;
+  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z'/%3E%3Cpath fill-rule='evenodd' d='M13.646 14.354l-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right calc(0.375em + 0.1875rem) center;
+  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
   border: 0;
 }
-
-button#toggle-password:active,
-button#toggle-password:focus,
-button#toggle-password:hover {
+button.toggle-password.password-visible {
+  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z'/%3E%3Cpath fill-rule='evenodd' d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E") !important;
+}
+button.toggle-password:active, button.toggle-password:focus, button.toggle-password:hover {
   cursor: pointer;
 }
-
-button#toggle-password:focus {
+button.toggle-password:focus {
   outline: none !important;
 }
 
 .input-password {
   padding-right: calc(1.5em + 0.75rem);
-  background-repeat: no-repeat;
-  background-position: right calc(0.375em + 0.1875rem) center;
-  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
-}
-
-.input-password[type=password]:valid {
-  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z'/%3E%3Cpath fill-rule='evenodd' d='M13.646 14.354l-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E") !important;
-}
-
-.input-password[type=text]:valid {
-  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z'/%3E%3Cpath fill-rule='evenodd' d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E") !important;
 }
 
 /*# sourceMappingURL=show-password-toggle.css.map */
diff --git a/css/show-password-toggle.css.map b/css/show-password-toggle.css.map
index 930e56f..ea8a403 100644
--- a/css/show-password-toggle.css.map
+++ b/css/show-password-toggle.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/show-password-toggle.scss"],"names":[],"mappings":"AAEA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE","file":"show-password-toggle.css","sourcesContent":["// hide default password reveal icon in Edge\r\n// https://docs.microsoft.com/en-us/microsoft-edge/web-platform/password-reveal#remove-the-password-reveal-control\r\n::-ms-reveal {\r\n  display: none;\r\n}\r\n\r\nbutton#toggle-password {\r\n  position: absolute;\r\n  top: 3px;\r\n  right: 4px;\r\n  z-index: 9;\r\n  width: 28px;\r\n  height: 30px;\r\n  background: 0;\r\n  border: 0;\r\n}\r\n\r\nbutton#toggle-password:active,\r\nbutton#toggle-password:focus,\r\nbutton#toggle-password:hover {\r\n  cursor: pointer;\r\n}\r\n\r\nbutton#toggle-password:focus {\r\n  outline: none !important;\r\n}\r\n\r\n.input-password {\r\n  padding-right: calc(1.5em + .75rem);\r\n  background-repeat: no-repeat;\r\n  background-position: right calc(.375em + .1875rem) center;\r\n  background-size: calc(.75em + .375rem) calc(.75em + .375rem);\r\n}\r\n\r\n.input-password[type=\"password\"]:valid {\r\n  background-image: url(\"data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z'/%3E%3Cpath fill-rule='evenodd' d='M13.646 14.354l-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E\") !important;\r\n}\r\n\r\n.input-password[type=\"text\"]:valid {\r\n  background-image: url(\"data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z'/%3E%3Cpath fill-rule='evenodd' d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E\") !important;\r\n}\r\n"]}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/show-password-toggle.scss"],"names":[],"mappings":"AAEA;EACE;;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAGE;;AAGF;EACE;;;AAKN;EACE","file":"show-password-toggle.css","sourcesContent":["// hide default password reveal icon in Edge\n// https://docs.microsoft.com/en-us/microsoft-edge/web-platform/password-reveal#remove-the-password-reveal-control\n::-ms-reveal {\n  display: none;\n}\n\nbutton {\n  &.toggle-password {\n    position: absolute;\n    top: 3px;\n    right: 4px;\n    z-index: 9;\n    width: 28px;\n    height: 30px;\n    background-color: transparent;\n    background-image: url(\"data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z'/%3E%3Cpath fill-rule='evenodd' d='M13.646 14.354l-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    background-position: right calc(.375em + .1875rem) center;\n    background-size: calc(.75em + .375rem) calc(.75em + .375rem);\n    border: 0;\n\n    &.password-visible {\n      background-image: url(\"data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z'/%3E%3Cpath fill-rule='evenodd' d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E\") !important;\n    }\n\n    &:active,\n    &:focus,\n    &:hover {\n      cursor: pointer;\n    }\n\n    &:focus {\n      outline: none !important;\n    }\n  }\n}\n\n.input-password {\n  padding-right: calc(1.5em + .75rem);\n}\n"]}
\ No newline at end of file
diff --git a/css/show-password-toggle.min.css b/css/show-password-toggle.min.css
index 0738f96..4ff4dc0 100644
--- a/css/show-password-toggle.min.css
+++ b/css/show-password-toggle.min.css
@@ -1,2 +1 @@
-::-ms-reveal{display:none}button#toggle-password{position:absolute;top:3px;right:4px;z-index:9;width:28px;height:30px;background:0;border:0}button#toggle-password:active,button#toggle-password:focus,button#toggle-password:hover{cursor:pointer}button#toggle-password:focus{outline:0!important}.input-password{padding-right:calc(1.5em + .75rem);background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}.input-password[type=password]:valid{background-image:url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z'/%3E%3Cpath fill-rule='evenodd' d='M13.646 14.354l-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E")!important}.input-password[type=text]:valid{background-image:url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z'/%3E%3Cpath fill-rule='evenodd' d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E")!important}
-/*# sourceMappingURL=show-password-toggle.min.css.map */
\ No newline at end of file
+::-ms-reveal{display:none}button.toggle-password{position:absolute;top:3px;right:4px;z-index:9;width:28px;height:30px;background-color:transparent;background-image:url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z'/%3E%3Cpath fill-rule='evenodd' d='M13.646 14.354l-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem);border:0}button.toggle-password.password-visible{background-image:url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z'/%3E%3Cpath fill-rule='evenodd' d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E")!important}button.toggle-password:active,button.toggle-password:focus,button.toggle-password:hover{cursor:pointer}button.toggle-password:focus{outline:0!important}.input-password{padding-right:calc(1.5em + .75rem)}
\ No newline at end of file
diff --git a/css/show-password-toggle.min.css.map b/css/show-password-toggle.min.css.map
deleted file mode 100644
index 537280e..0000000
--- a/css/show-password-toggle.min.css.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["css\\show-password-toggle.css"],"names":[],"mappings":"AAAA,aACE,QAAS,KAGX,uBACE,SAAU,SACV,IAAK,IACL,MAAO,IACP,QAAS,EACT,MAAO,KACP,OAAQ,KACR,WAAY,EACZ,OAAQ,EAGV,8BACA,6BACA,6BACE,OAAQ,QAGV,6BACE,QAAS,YAGX,gBACE,cAAe,qBACf,kBAAmB,UACnB,oBAAqB,MAAM,wBAA0B,OACrD,gBAAiB,sBAAwB,sBAG3C,qCACE,iBAAkB,27BAGpB,iCACE,iBAAkB","sourcesContent":["::-ms-reveal {\n  display: none;\n}\n\nbutton#toggle-password {\n  position: absolute;\n  top: 3px;\n  right: 4px;\n  z-index: 9;\n  width: 28px;\n  height: 30px;\n  background: 0;\n  border: 0;\n}\n\nbutton#toggle-password:active,\nbutton#toggle-password:focus,\nbutton#toggle-password:hover {\n  cursor: pointer;\n}\n\nbutton#toggle-password:focus {\n  outline: none !important;\n}\n\n.input-password {\n  padding-right: calc(1.5em + 0.75rem);\n  background-repeat: no-repeat;\n  background-position: right calc(0.375em + 0.1875rem) center;\n  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);\n}\n\n.input-password[type=password]:valid {\n  background-image: url(\"data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z'/%3E%3Cpath fill-rule='evenodd' d='M13.646 14.354l-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E\") !important;\n}\n\n.input-password[type=text]:valid {\n  background-image: url(\"data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z'/%3E%3Cpath fill-rule='evenodd' d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E\") !important;\n}\n\n/*# sourceMappingURL=show-password-toggle.css.map */\n"]}
\ No newline at end of file
diff --git a/js/show-password-toggle-jquery.js b/js/show-password-toggle-jquery.js
new file mode 100644
index 0000000..9d654ed
--- /dev/null
+++ b/js/show-password-toggle-jquery.js
@@ -0,0 +1,28 @@
+$(function () {
+  let ShowPasswordToggles = $('input:password');
+  if (ShowPasswordToggles.length) {
+    ShowPasswordToggles.each(function () {
+      let $this = $(this);
+      $this.addClass('input-password');
+      let $toggleButtonLabels = {
+        show: $this.data('show') || 'Show password as plain text. Warning: this will display your password on the screen.',
+        hide: $this.data('hide') || 'Hide password.'
+      };
+      let $toggleButton = $('<button type="button" class="toggle-password" aria-label="" aria-pressed="false"></button>');
+      $toggleButton.on('click', function () {
+        if ($this.attr('type') === 'password') {
+          $this.attr('type', 'text');
+          $toggleButton.addClass('password-visible');
+          $toggleButton.attr('aria-label', $toggleButtonLabels.hide);
+          $toggleButton.attr('aria-pressed', 'true');
+        } else {
+          $this.attr('type', 'password');
+          $toggleButton.removeClass('password-visible');
+          $toggleButton.attr('aria-label', $toggleButtonLabels.show);
+          $toggleButton.attr('aria-pressed', 'false');
+        }
+      });
+      $this.after($toggleButton);
+    });
+  }
+});
diff --git a/js/show-password-toggle-jquery.min.js b/js/show-password-toggle-jquery.min.js
new file mode 100644
index 0000000..9efc2d0
--- /dev/null
+++ b/js/show-password-toggle-jquery.min.js
@@ -0,0 +1 @@
+$((function(){let ShowPasswordToggles=$("input:password");if(ShowPasswordToggles.length){ShowPasswordToggles.each((function(){let $this=$(this);$this.addClass("input-password");let $toggleButtonLabels={show:$this.data("show")||"Show password as plain text. Warning: this will display your password on the screen.",hide:$this.data("hide")||"Hide password."};let $toggleButton=$('<button type="button" class="toggle-password" aria-label="" aria-pressed="false"></button>');$toggleButton.on("click",(function(){if($this.attr("type")==="password"){$this.attr("type","text");$toggleButton.addClass("password-visible");$toggleButton.attr("aria-label",$toggleButtonLabels.hide);$toggleButton.attr("aria-pressed","true")}else{$this.attr("type","password");$toggleButton.removeClass("password-visible");$toggleButton.attr("aria-label",$toggleButtonLabels.show);$toggleButton.attr("aria-pressed","false")}}));$this.after($toggleButton)}))}}));
\ No newline at end of file
diff --git a/js/show-password-toggle.js b/js/show-password-toggle.js
index 1ffc55b..0a8b447 100644
--- a/js/show-password-toggle.js
+++ b/js/show-password-toggle.js
@@ -1,23 +1,31 @@
-var ShowPasswordToggle = document.querySelector("[type='password']");
-ShowPasswordToggle.onclick = function () {
-  document.querySelector("[type='password']").classList.add("input-password");
-  document.getElementById("toggle-password").classList.remove("d-none");
-
-  const passwordInput = document.querySelector("[type='password']");
-  const togglePasswordButton = document.getElementById("toggle-password");
-
-  togglePasswordButton.addEventListener("click", togglePassword);
-  function togglePassword() {
-    if (passwordInput.type === "password") {
-      passwordInput.type = "text";
-      togglePasswordButton.setAttribute("aria-label", "Hide password.");
-    } else {
-      passwordInput.type = "password";
-      togglePasswordButton.setAttribute(
-        "aria-label",
-        "Show password as plain text. " +
-          "Warning: this will display your password on the screen."
-      );
-    }
+let ShowPasswordToggles = document.querySelectorAll("input[type='password']");
+let ShowPasswordTogglesLength = ShowPasswordToggles.length;
+if (ShowPasswordTogglesLength) {
+  for (let i = 0; i < ShowPasswordTogglesLength; ++i) {
+    const passwordInput = ShowPasswordToggles[i];
+    passwordInput.classList.add('input-password');
+    const togglePasswordButtonLabels = {
+      show: passwordInput.dataset.show || 'Show password as plain text. Warning: this will display your password on the screen.',
+      hide: passwordInput.dataset.hide || 'Hide password.'
+    };
+    let togglePasswordButton = document.createElement('button');
+    togglePasswordButton.type = 'button';
+    togglePasswordButton.classList.add('toggle-password');
+    togglePasswordButton.setAttribute('aria-label', togglePasswordButtonLabels.show);
+    togglePasswordButton.setAttribute('aria-pressed', 'false');
+    togglePasswordButton.addEventListener('click', function() {
+      if (passwordInput.type === 'password') {
+        passwordInput.type = 'text';
+        togglePasswordButton.classList.add('password-visible');
+        togglePasswordButton.setAttribute('aria-label', togglePasswordButtonLabels.hide);
+        togglePasswordButton.setAttribute('aria-pressed', 'true');
+      } else {
+        passwordInput.type = 'password';
+        togglePasswordButton.classList.remove('password-visible');
+        togglePasswordButton.setAttribute('aria-label', togglePasswordButtonLabels.show);
+        togglePasswordButton.setAttribute('aria-pressed', 'false');
+      }
+    });
+    passwordInput.after(togglePasswordButton);
   }
-};
+}
diff --git a/js/show-password-toggle.min.js b/js/show-password-toggle.min.js
index c50e844..249fb97 100644
--- a/js/show-password-toggle.min.js
+++ b/js/show-password-toggle.min.js
@@ -1 +1 @@
-var ShowPasswordToggle=document.querySelector("[type='password']");ShowPasswordToggle.onclick=function(){document.querySelector("[type='password']").classList.add("input-password");document.getElementById("toggle-password").classList.remove("d-none");const passwordInput=document.querySelector("[type='password']");const togglePasswordButton=document.getElementById("toggle-password");togglePasswordButton.addEventListener("click",togglePassword);function togglePassword(){if(passwordInput.type==="password"){passwordInput.type="text";togglePasswordButton.setAttribute("aria-label","Hide password.")}else{passwordInput.type="password";togglePasswordButton.setAttribute("aria-label","Show password as plain text. "+"Warning: this will display your password on the screen.")}}};
\ No newline at end of file
+let ShowPasswordToggles=document.querySelectorAll("input[type='password']");let ShowPasswordTogglesLength=ShowPasswordToggles.length;if(ShowPasswordTogglesLength){for(let i=0;i<ShowPasswordTogglesLength;++i){const passwordInput=ShowPasswordToggles[i];passwordInput.classList.add("input-password");const togglePasswordButtonLabels={show:passwordInput.dataset.show||"Show password as plain text. Warning: this will display your password on the screen.",hide:passwordInput.dataset.hide||"Hide password."};let togglePasswordButton=document.createElement("button");togglePasswordButton.type="button";togglePasswordButton.classList.add("toggle-password");togglePasswordButton.setAttribute("aria-label",togglePasswordButtonLabels.show);togglePasswordButton.setAttribute("aria-pressed","false");togglePasswordButton.addEventListener("click",(function(){if(passwordInput.type==="password"){passwordInput.type="text";togglePasswordButton.classList.add("password-visible");togglePasswordButton.setAttribute("aria-label",togglePasswordButtonLabels.hide);togglePasswordButton.setAttribute("aria-pressed","true")}else{passwordInput.type="password";togglePasswordButton.classList.remove("password-visible");togglePasswordButton.setAttribute("aria-label",togglePasswordButtonLabels.show);togglePasswordButton.setAttribute("aria-pressed","false")}}));passwordInput.after(togglePasswordButton)}}
\ No newline at end of file
diff --git a/package.json b/package.json
index a408b2b..2c367f9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-show-password-toggle",
-  "version": "1.2.0",
+  "version": "1.3.3",
   "description": "A show password as text toggle for Bootstrap",
   "keywords": [
     "bootstrap",
@@ -29,14 +29,17 @@
     "scss/*"
   ],
   "author": "Christian Oliff (https://christianoliff.com)",
+  "contributors": [
+    "Oliver Georgi <slackero@gmail.com> (https://github.com/slackero/)"
+  ],
   "scripts": {
     "build": "npm-run-all css-lint css-compile css-minify js-lint js-minify",
     "css": "npm-run-all css-lint css-compile css-minify",
-    "css-compile": "sass --style expanded --source-map --embed-sources scss:css",
+    "css-compile": "sass --style expanded --embed-sources scss:css",
     "css-lint": "stylelint \"scss/*.scss\"",
-    "css-minify": "cleancss -O1 --format breakWith=lf --source-map --source-map-inline-sources --output css/show-password-toggle.min.css css/show-password-toggle.css",
-    "js-lint": "eslint js/show-password-toggle.js",
-    "js-minify": "terser --ecma 5 --keep-classnames --keep-fnames --output js/show-password-toggle.min.js -- js/show-password-toggle.js",
+    "css-minify": "cleancss -O1 --format breakWith=lf --output css/show-password-toggle.min.css css/show-password-toggle.css",
+    "js-lint": "eslint js/show-password-toggle.js  js/show-password-toggle-jquery.js",
+    "js-minify": "terser --ecma 5 --keep-classnames --keep-fnames --output js/show-password-toggle.min.js -- js/show-password-toggle.js && terser --ecma 5 --keep-classnames --keep-fnames --output js/show-password-toggle-jquery.min.js -- js/show-password-toggle-jquery.js",
     "test": "npm-run-all css-lint js-lint"
   },
   "devDependencies": {
diff --git a/scss/show-password-toggle.scss b/scss/show-password-toggle.scss
index ff70ef9..78d23d1 100644
--- a/scss/show-password-toggle.scss
+++ b/scss/show-password-toggle.scss
@@ -4,38 +4,37 @@
   display: none;
 }
 
-button#toggle-password {
-  position: absolute;
-  top: 3px;
-  right: 4px;
-  z-index: 9;
-  width: 28px;
-  height: 30px;
-  background: 0;
-  border: 0;
-}
+button {
+  &.toggle-password {
+    position: absolute;
+    top: 3px;
+    right: 4px;
+    z-index: 9;
+    width: 28px;
+    height: 30px;
+    background-color: transparent;
+    background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z'/%3E%3Cpath fill-rule='evenodd' d='M13.646 14.354l-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right calc(.375em + .1875rem) center;
+    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
+    border: 0;
 
-button#toggle-password:active,
-button#toggle-password:focus,
-button#toggle-password:hover {
-  cursor: pointer;
-}
+    &.password-visible {
+      background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z'/%3E%3Cpath fill-rule='evenodd' d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E") !important;
+    }
 
-button#toggle-password:focus {
-  outline: none !important;
+    &:active,
+    &:focus,
+    &:hover {
+      cursor: pointer;
+    }
+
+    &:focus {
+      outline: none !important;
+    }
+  }
 }
 
 .input-password {
   padding-right: calc(1.5em + .75rem);
-  background-repeat: no-repeat;
-  background-position: right calc(.375em + .1875rem) center;
-  background-size: calc(.75em + .375rem) calc(.75em + .375rem);
-}
-
-.input-password[type="password"]:valid {
-  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z'/%3E%3Cpath d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z'/%3E%3Cpath d='M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z'/%3E%3Cpath fill-rule='evenodd' d='M13.646 14.354l-12-12 .708-.708 12 12-.708.708z'/%3E%3C/svg%3E") !important;
-}
-
-.input-password[type="text"]:valid {
-  background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z'/%3E%3Cpath fill-rule='evenodd' d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z'/%3E%3C/svg%3E") !important;
 }
diff --git a/tests/bootstrap4-jquery-sign-in/index.html b/tests/bootstrap4-jquery-sign-in/index.html
new file mode 100644
index 0000000..eaf9f98
--- /dev/null
+++ b/tests/bootstrap4-jquery-sign-in/index.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Show Password Toggle for Bootstrap 4</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css">
+  <meta name="description" content="Show Password Toggle for Bootstrap 4">
+  <meta name="author" content="Christian Oliff">
+  <meta name="twitter:creator" content="@christianoliff">
+  <meta name="monetization" content="$ilp.uphold.com/Epqzn3YGr2MB">
+  <link rel="stylesheet" href="../../css/show-password-toggle.css">
+</head>
+
+<body class="bg-light p-3">
+  <form class="mx-auto card p-4 col-12 col-sm-8 col-md-5 col-lg-4 mt-sm-4 mt-md-5" autocomplete="off">
+    <h1 class="h2 mb-4 text-center text-primary">Please sign in</h1>
+
+    <div class="form-group">
+      <label for="email">Email address</label>
+      <input type="email" name="email" id="email" class="form-control" required autofocus>
+    </div>
+
+    <div class="form-group">
+      <label for="current-password">Password</label>
+      <div class="input-group">
+        <input type="password"
+               name="password"
+               id="current-password"
+               autocomplete="current-password"
+               class="form-control rounded"
+               spellcheck="false"
+               autocapitalize="off"
+               required
+               data-show="Show password as plain text. Warning: this will display your password on the screen."
+               data-hide="Hide password."
+        >
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label for="repeat-password">Password repeat</label>
+      <div class="input-group">
+        <input type="password"
+               name="password_repeat"
+               id="repeat-password"
+               autocomplete="current-password"
+               class="form-control rounded"
+               spellcheck="false"
+               autocapitalize="off"
+               required
+               data-show="Show password as plain text. Warning: this will display your password on the screen."
+               data-hide="Hide password."
+        >
+      </div>
+    </div>
+
+    <button class="btn btn-lg btn-primary btn-block mt-3" type="submit">
+      Sign in
+    </button>
+
+  </form>
+
+  <p class="my-3 text-center">
+    <a href="https://github.com/coliff/bootstrap-show-password-toggle" class="text-muted">
+      &copy; 2021
+    </a>
+  </p>
+
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+  <script src="../../js/show-password-toggle-jquery.min.js" async></script>
+</body>
+
+</html>
diff --git a/tests/bootstrap4-sign-in/index.html b/tests/bootstrap4-sign-in/index.html
index 2490139..08a188a 100644
--- a/tests/bootstrap4-sign-in/index.html
+++ b/tests/bootstrap4-sign-in/index.html
@@ -11,29 +11,49 @@
   <meta name="twitter:creator" content="@christianoliff">
   <meta name="monetization" content="$ilp.uphold.com/Epqzn3YGr2MB">
   <link rel="stylesheet" href="../../css/show-password-toggle.css">
-  <style>
-    form {
-      max-width: 330px;
-      margin-top: 17%;
-    }
-  </style>
 </head>
 
-<body class="text-center bg-light h-100 mt-5">
-  <form class="text-left mx-auto card p-4 w-100 p-2" autocomplete="off">
-    <h1 class="h3 mb-3 text-center">Please sign in</h1>
+<body class="bg-light p-3">
+  <form class="mx-auto card p-4 col-12 col-sm-8 col-md-5 col-lg-4 mt-sm-4 mt-md-5" autocomplete="off">
+    <h1 class="h2 mb-4 text-center text-primary">Please sign in</h1>
 
-    <label for="email" class="text-left ml-0">Email address</label>
-    <input type="email" name="email" id="email" class="form-control mb-3" required autofocus>
+    <div class="form-group">
+      <label for="email">Email address</label>
+      <input type="email" name="email" id="email" class="form-control" required autofocus>
+    </div>
 
-    <label for="password">Password</label>
+    <div class="form-group">
+      <label for="current-password">Password</label>
+      <div class="input-group">
+        <input type="password"
+               name="password"
+               id="current-password"
+               autocomplete="current-password"
+               class="form-control rounded"
+               spellcheck="false"
+               autocapitalize="off"
+               required
+               data-show="Show password as plain text. Warning: this will display your password on the screen."
+               data-hide="Hide password."
+        >
+      </div>
+    </div>
 
-    <div class="input-group">
-      <input type="password" id="password" name="current-password" autocomplete="current-password"
-        class="form-control rounded" spellcheck="false" autocorrect="off" autocapitalize="off" required>
-      <button id="toggle-password" type="button" class="d-none"
-        aria-label="Show password as plain text. Warning: this will display your password on the screen.">
-      </button>
+    <div class="form-group">
+      <label for="repeat-password">Password repeat</label>
+      <div class="input-group">
+        <input type="password"
+               name="password_repeat"
+               id="repeat-password"
+               autocomplete="current-password"
+               class="form-control rounded"
+               spellcheck="false"
+               autocapitalize="off"
+               required
+               data-show="Show password as plain text. Warning: this will display your password on the screen."
+               data-hide="Hide password."
+        >
+      </div>
     </div>
 
     <button class="btn btn-lg btn-primary btn-block mt-3" type="submit">
diff --git a/tests/bootstrap5-sign-in/index.html b/tests/bootstrap5-sign-in/index.html
index 733d0f8..a1a74a9 100644
--- a/tests/bootstrap5-sign-in/index.html
+++ b/tests/bootstrap5-sign-in/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en"">
 
 <head>
   <meta charset="utf-8">
@@ -11,32 +11,49 @@
   <meta name="twitter:creator" content="@christianoliff">
   <meta name="monetization" content="$ilp.uphold.com/Epqzn3YGr2MB">
   <link rel="stylesheet" href="../../css/show-password-toggle.css">
-  <style>
-    form {
-      max-width: 330px;
-      margin-top: 17%;
-    }
-  </style>
   <!-- Bootstrap 5 IE11 Polyfills -->
   <script
     nomodule>window.MSInputMethodContext && document.documentMode && document.write('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-ie11@5/css/bootstrap-ie11.min.css"><script src="https://cdn.jsdelivr.net/combine/npm/ie11-custom-properties@4,npm/element-qsa-scope@1"><\/script><script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"><\/script>');</script>
 </head>
 
-<body class="text-center bg-light h-100 mt-5">
-  <form class="text-left mx-auto card p-4 w-100 p-2" autocomplete="off">
-    <h1 class="h3 mb-3 text-center">Please sign in</h1>
+<body class="bg-light p-3">
+  <form class="mx-auto card p-4 col-12 col-sm-8 col-md-5 col-lg-4 mt-sm-4 mt-md-5" autocomplete="off">
+    <h1 class="h2 mb-4 text-center text-primary">Please sign in</h1>
 
-    <label for="email" class="text-start ms-0">Email address</label>
-    <input type="email" name="email" id="email" class="form-control mb-3" required autofocus>
+    <div class="mb-3">
+      <label for="email" class="form-label">Email address</label>
+      <input type="email" name="email" id="email" class="form-control" required autofocus>
+    </div>
 
-    <label for="password" class="text-start">Password</label>
+    <div class="mb-3">
+      <label for="current-password" class="form-label">Password</label>
+      <div class="input-group">
+        <input type="password"
+               name="password"
+               id="current-password"
+               autocomplete="current-password"
+               class="form-control rounded" spellcheck="false" autocapitalize="off" required
+               data-show="Show password as plain text. Warning: this will display your password on the screen."
+               data-hide="Hide password."
+        >
+      </div>
+    </div>
 
-    <div class="input-group">
-      <input type="password" id="password" name="current-password" autocomplete="current-password"
-        class="form-control rounded" spellcheck="false" autocorrect="off" autocapitalize="off" required>
-      <button id="toggle-password" type="button" class="d-none"
-        aria-label="Show password as plain text. Warning: this will display your password on the screen.">
-      </button>
+    <div class="mb-3">
+      <label for="repeat-password" class="form-label">Password repeat</label>
+      <div class="input-group">
+        <input type="password"
+               name="password_repeat"
+               id="repeat-password"
+               autocomplete="current-password"
+               class="form-control rounded"
+               spellcheck="false"
+               autocapitalize="off"
+               required
+               data-show="Show password as plain text. Warning: this will display your password on the screen."
+               data-hide="Hide password."
+        >
+      </div>
     </div>
 
     <button class="btn btn-lg btn-primary w-100 mt-3" type="submit">
@@ -47,10 +64,9 @@ <h1 class="h3 mb-3 text-center">Please sign in</h1>
 
   <p class="my-3 text-center">
     <a href="https://github.com/coliff/bootstrap-show-password-toggle" class="small text-muted text-decoration-none">
-      &copy; 2021
-    </a>
-  </p>
-
+        &copy; 2021
+      </a>
+    </p>
   <script src="../../js/show-password-toggle.min.js" async></script>
 </body>