diff --git a/app/javascript/packs/notificationSubscriptionHandler.js b/app/javascript/packs/notificationSubscriptionHandler.js
index 3b8a1139f..3757a01fe 100644
--- a/app/javascript/packs/notificationSubscriptionHandler.js
+++ b/app/javascript/packs/notificationSubscriptionHandler.js
@@ -41,13 +41,25 @@ function loadFunctionality() {
     };
   } else {
     updateStatus = target => {
+      let payload = '';
+      const shouldUnsubscribeToNotifications = target.classList.contains('selected')
+        || target.classList.contains('selected-emoji');
       const allButtons = document.getElementsByClassName(
         'notification-subscription-label',
       );
       for (let i = 0; i < allButtons.length; i += 1) {
         allButtons[i].classList.remove('selected');
       }
-      target.classList.add('selected');
+      if (shouldUnsubscribeToNotifications) {
+        const unsubscribeButton = allButtons.namedItem(
+          'unsubscribe',
+        );
+        unsubscribeButton.classList.add('selected');
+        payload = unsubscribeButton.dataset.payload;
+      } else {
+        target.classList.add('selected');
+        payload = target.dataset.payload;
+      }
       fetch(`/notification_subscriptions/${notifiableType}/${notifiableId}`, {
         method: 'POST',
         headers: {
@@ -57,7 +69,7 @@ function loadFunctionality() {
         },
         credentials: 'same-origin',
         body: JSON.stringify({
-          config: target.dataset.payload,
+          config: payload,
           // notifiable params are passed via URL
         }),
       });
diff --git a/app/views/articles/_actions.html.erb b/app/views/articles/_actions.html.erb
index 6a34ec9b4..cbd279115 100644
--- a/app/views/articles/_actions.html.erb
+++ b/app/views/articles/_actions.html.erb
@@ -34,7 +34,7 @@
           <div class="dropdown-link-row notification-subscriptions-area-row"
             id="notification-subscriptions-area" data-notifiable-id="<%= @article.id %>" data-notifiable-type="Article">
             <div class="notification-subscriptions-area-header">🔔 Notification Subscriptions
-              <button for="subscribe_notifications" id="notification-subscription-label_not_subscribed" class="notification-subscription-label notification-subscription-label-unsubscribe" data-payload="not_subscribed">
+              <button for="subscribe_notifications" id="notification-subscription-label_not_subscribed" class="notification-subscription-label notification-subscription-label-unsubscribe" data-payload="not_subscribed" name="unsubscribe">
                 Unsubscribe
               </button>
             </div>