diff --git a/js/office_hours.js b/js/office_hours.js
index ee76f76..c2290d7 100644
--- a/js/office_hours.js
+++ b/js/office_hours.js
@@ -100,6 +100,8 @@
           const $nextTr = $(this).closest('tr').next();
           $nextTr.fadeIn('slow');
 
+          $nextTr.removeClass('js-office-hours-hide');
+
           fixStriping();
         }
 
@@ -132,6 +134,12 @@
           // Clear the comment.
           slot.find('.form-text').each(clearValue);
 
+          slot.addClass('js-office-hours-hide');
+          slot.fadeOut('slow');
+
+          const $mainSlotAddLink = $(this).closest('tr').prev().find('[data-drupal-selector$=add]');
+          $mainSlotAddLink.show();
+
           // @todo Hide subsequent slot that is cleared.
         }
 
@@ -204,7 +212,7 @@
           });
 
           // If needed, show each Add-link of the day, after "Copy previous day".
-          currentSelector.find('[id$=add]').each(showAddLink);
+          currentSelector.find('[data-drupal-selector$=add]').each(showAddLink);
         }
 
         // When the document loads, hide every slot above the max slots per day.
@@ -212,21 +220,21 @@
 
         // Attach a function to each all_day checkbox, to enable/disable the times
         // when the checkbox is clicked, and initialize each one.
-        $('[id$="all-day"]').bind('click', setAllDayTimeSlot)
-        .each(setAllDayTimeSlot);
+        $('[data-drupal-selector$="all-day"]').bind('click', setAllDayTimeSlot)
+          .each(setAllDayTimeSlot);
 
         // Attach a function to each add-link to show the next slot if clicked upon.
         // Show the Add-link, except if the next time slot is hidden.
-        $('.js-office-hours-operations-wrapper [id$=add]').bind('click', addTimeSlot)
-        .each(showAddLink);
+        $('.js-office-hours-operations-wrapper [data-drupal-selector$=add]').bind('click', addTimeSlot)
+          .each(showAddLink);
 
         // Attach a function to each clear-link, to clear the slot if clicked upon.
-        $('.js-office-hours-operations-wrapper [id$=clear]').bind('click', clearTimeSlot);
+        $('.js-office-hours-operations-wrapper [data-drupal-selector$=clear]').bind('click', clearTimeSlot);
 
         // Attach a function to each copy-link, to copy the slot values
         // from previous day, when user clicks "Copy previous day".
         // @todo This works for Table widget, not yet for List Widget.
-        $('.js-office-hours-operations-wrapper [id$=copy]').bind('click', copyPreviousDay);
+        $('.js-office-hours-operations-wrapper [data-drupal-selector$=copy]').bind('click', copyPreviousDay);
 
         fixStriping();
       });