diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc
index 50d4372385..f0b40d4f9f 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc
@@ -138,38 +138,7 @@
                                         </form>
                                     [% ELSE %]
                                         [% IF AutoResumeSuspendedHolds %]
-                                            <a class="btn btn-link js-show" href="#suspendModal[% HOLD.reserve_id | html %]" role="button" data-toggle="modal"><i class="fa fa-pause" aria-hidden="true"></i> Suspend</a>
-                                            [% # hold suspend modal form %]
-                                            <div id="suspendModal[% HOLD.reserve_id | html %]" class="modal-nojs" tabindex="-1" role="dialog" aria-labelledby="suspendModal[% HOLD.reserve_id | html %]Label" aria-hidden="true">
-                                                <div class="modal-dialog">
-                                                    <div class="modal-content">
-                                                        <form action="/cgi-bin/koha/opac-modrequest-suspend.pl" method="post">
-                                                            <div class="modal-header">
-                                                                [% IF HOLD.suspend %]
-                                                                    <h3 class="modal-title" id="suspendModal[% HOLD.reserve_id | html %]Label">Resume your hold on <em>[% HOLD.biblio.title | html %]</em></h3>
-                                                                [% ELSE %]
-                                                                    <h3 class="modal-title" id="suspendModal[% HOLD.reserve_id | html %]Label">Suspend your hold on <em>[% HOLD.biblio.title | html %]</em></h3>
-                                                                [% END %]
-                                                                <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close">
-                                                                    <span aria-hidden="true">x</span>
-                                                                </button>
-                                                            </div>
-                                                            <div class="modal-body">
-                                                                <input type="hidden" name="reserve_id" value="[% HOLD.reserve_id | html %]" />
-                                                                <label for="suspend_until_[% HOLD.reserve_id | html %]">Suspend until:</label>
-                                                                <input type="text" name="suspend_until" id="suspend_until_[% HOLD.reserve_id | html %]" class="suspend-until flatpickr futuredate" size="10" />
-                                                                [% INCLUDE 'date-format.inc' %]
-                                                                <p class="js-show"><a href="#" onclick="document.getElementById('suspend_until_[% HOLD.reserve_id | html %]').value='';return false;">Clear date to suspend indefinitely</a></p>
-                                                                <button class="btn btn-primary btn-sm js-hide" type="submit" name="submit">Suspend</button>
-                                                            </div>
-                                                            <div class="modal-footer">
-                                                                <button class="btn btn-primary"><i class="fa fa-check" aria-hidden="true"></i> Suspend</button>
-                                                                <button data-dismiss="modal" class="btn btn-secondary"><i class="fa fa-remove" aria-hidden="true"></i> Do not suspend</button>
-                                                            </div>
-                                                        </form>
-                                                    </div> <!-- /.modal-content -->
-                                                </div> <!-- /.modal-dialog -->
-                                            </div>  <!-- /#suspendModal[% HOLD.reserve_id | html %] -->
+                                            <a class="btn btn-link suspend_hold js-show" href="#" role="button" data-title="[% HOLD.biblio.title | html %] [% FOREACH subtitle IN HOLD.biblio.subtitle.split(' \| ') %][% IF Koha.Preference('marcflavour')=='UNIMARC' %],[% END %][% subtitle | html %][% END %]" data-reserve_id="[% HOLD.reserve_id | html %]"><i class="fa fa-pause" aria-hidden="true"></i> Suspend</a>
                                         [% ELSE %]
                                             <form class="form-inline" action="/cgi-bin/koha/opac-modrequest-suspend.pl" method="post">
                                                 <input type="hidden" name="reserve_id" value="[% HOLD.reserve_id | html %]" />
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
index 9448a3a585..8ef4dd18bb 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
@@ -865,6 +865,38 @@
     </div> <!-- /.container-fluid -->
 </div> <!-- /#main -->
 
+[% # hold suspend modal form %]
+<div id="suspendHoldModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="suspendModalLabel" aria-hidden="true" data-focus="false">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <form action="/cgi-bin/koha/opac-modrequest-suspend.pl" method="post">
+                <div class="modal-header">
+                    [% IF HOLD.suspend %]
+                        <h5 class="modal-title" id="suspendModalLabel">Resume hold</h5>
+                    [% ELSE %]
+                        <h5 class="modal-title" id="suspendModalLabel">Suspend hold</h5>
+                    [% END %]
+                    <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">x</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <h6 id="suspendHoldTitle"></h6>
+                    <input type="hidden" name="reserve_id" id="suspendHoldReserveId" value="" />
+                    <label for="suspend_untilDate">Suspend until:</label>
+                    <input type="text" name="suspend_until" id="suspend_untilDate" size="10" />
+                    [% INCLUDE 'date-format.inc' %]
+                    <p><a href="#" id="suspend-modal-clear-date">Clear date to suspend indefinitely</a></p>
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-primary"><i class="fa fa-check" aria-hidden="true"></i> Suspend</button>
+                    <button data-dismiss="modal" class="btn btn-secondary"><i class="fa fa-remove" aria-hidden="true"></i> Do not suspend</button>
+                </div>
+            </form>
+        </div> <!-- /.modal-content -->
+    </div> <!-- /.modal-dialog -->
+</div>  <!-- /#suspendModal -->
+
 [% IF ( OverDriveCirculation ) %]
     [% INCLUDE 'overdrive-checkout.inc' %]
     [% IF ( Koha.Preference('OverDrivePasswordRequired') ) %]
@@ -941,6 +973,31 @@
                 })($(this))
             });
 
+            /* We initiate this flatpickr instance here so that we can use the variable later */
+            var suspend_until_date = $("#suspend_untilDate").flatpickr({
+                minDate: "today"
+            });
+
+            $(".suspend_hold").on("click", function(e){
+                e.preventDefault();
+                var title = $(this).data("title");
+                var reserve_id = $(this).data("reserve_id");
+                $("#suspendHoldReserveId").val( reserve_id );
+                $("#suspendHoldTitle").html( "<em>" + title + "</em>" );
+                $("#suspendHoldModal").modal("show");
+            });
+
+            $("#suspend-modal-clear-date").on( "click", function(e) {
+                e.preventDefault();
+                suspend_until_date.clear();
+            });
+
+            $("#suspendHoldModal").on("hidden.bs.modal", function(){
+                $("#suspendHoldTitle").html("");
+                $("#suspendHoldReserveId").val("");
+                suspend_until_date.clear();
+            });
+
             $("#suspend_all_submit").on("click", function(e){
                 e.preventDefault();
                 var title = _("Are you sure you want to suspend all holds?");