diff --git a/js/paragraphs.add_above_button.js b/js/paragraphs.add_above_button.js
index 6a428f4..f0eb1b6 100644
--- a/js/paragraphs.add_above_button.js
+++ b/js/paragraphs.add_above_button.js
@@ -13,19 +13,25 @@
    * @param event
    *   Click event.
    */
-  var clickHandler = function(event) {
+  var clickHandler = function (event) {
     event.preventDefault();
     var $button = $(this);
-    var $add_more_wrapper = $button.closest('table').siblings('.clearfix').find('.paragraphs-add-dialog');
 
     // Find delta for row without interference of unrelated table rows.
     var $anchorRow = $button.closest('tr');
     var delta = $anchorRow.parent().find('> .draggable').index($anchorRow);
+    var $add_more_wrapper = $button.closest('table').siblings('.clearfix').find('.paragraphs-add-wrapper');
 
     // Set delta before opening of dialog.
-    $add_more_wrapper.parent().find('.paragraph-type-add-modal-delta').val(delta);
+    $add_more_wrapper.find('.paragraph-type-add-delta').val(delta);
 
-    Drupal.paragraphsAddModal.openDialog($add_more_wrapper, Drupal.t('Add above'));
+    // If the add mode is modal open the dialog, otherwise press the add button.
+    if ($add_more_wrapper.find('.paragraph-type-add-delta').hasClass('modal')) {
+      Drupal.paragraphsAddModal.openDialog($add_more_wrapper.find('.paragraphs-add-dialog'), Drupal.t('Add above'));
+    }
+    else {
+      $add_more_wrapper.find('.field-add-more-submit').unbind('click').click();
+    }
   };
 
   /**
@@ -38,12 +44,26 @@
       $('.paragraphs-dropdown-actions', context).once('paragraphs-add-above-button').each(function () {
         var $actions = $(this);
         if ($actions.closest('.paragraph-top').hasClass('add-above-on')) {
-          var $button = $('<input class="paragraphs-dropdown-action paragraphs-dropdown-action--add-above button button--small js-form-submit form-submit" type="submit" value="' + Drupal.t('Add above') + '">');
-          // "Mousedown" is used since the original actions created by paragraphs
-          // use the event "focusout" to hide the actions dropdown.
-          $button.on('mousedown', clickHandler);
+          var $add_avobe = false;
+          var $add_more_wrapper = $actions.closest('table').siblings('.clearfix').find('.paragraphs-add-wrapper');
+
+          // The Add Above button is added when the add mode is modal or when
+          // there is one add button in the other add modes.
+          if ($add_more_wrapper.find('.paragraph-type-add-delta').hasClass('modal')) {
+            $add_avobe = true;
+          }
+          else if ($add_more_wrapper.find('.field-add-more-submit').length === 1) {
+            $add_avobe = true;
+          }
+          // Prepend the Add above button only if there is only one button.
+          if ($add_avobe) {
+            var $button = $('<input class="paragraphs-dropdown-action paragraphs-dropdown-action--add-above button button--small js-form-submit form-submit" type="submit" onClick="return false;" value="' + Drupal.t('Add above') + '">');
+            // "Mousedown" is used since the original actions created by
+            // paragraphs use the event "focusout" to hide the actions dropdown.
+            $button.on('mousedown', clickHandler);
 
-          $actions.prepend($button);
+            $actions.prepend($button);
+          }
         }
       });
     }
diff --git a/js/paragraphs.modal.js b/js/paragraphs.modal.js
index 16128f1..cb16862 100644
--- a/js/paragraphs.modal.js
+++ b/js/paragraphs.modal.js
@@ -47,7 +47,7 @@
     var $element = $(element);
 
     // Get the delta element before moving $element to dialog element.
-    var $modalDelta = $element.parent().find('.paragraph-type-add-modal-delta');
+    var $modalDelta = $element.parent().find('.paragraph-type-add-delta');
 
     // Deep clone with all attached events. We need to work on cloned element
     // and not directly on origin because Drupal dialog.ajax.js
diff --git a/paragraphs.module b/paragraphs.module
index 53f7d5f..3c08965 100644
--- a/paragraphs.module
+++ b/paragraphs.module
@@ -314,6 +314,10 @@ function template_preprocess_paragraphs_add_dialog(&$variables) {
       // $add variable for the add button.
       $variables['add'] = $variables['element'][$key];
     }
+    elseif ($key == 'add_more_delta') {
+      // Add the delta to the add wrapper.
+      $variables['add'][$key] = $variables['element'][$key];
+    }
     else {
       // Buttons for the paragraph types in the modal form.
       $variables['buttons'][$key] = $variables['element'][$key];
diff --git a/src/Plugin/Field/FieldWidget/ParagraphsWidget.php b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
index e6decde..9ecc277 100644
--- a/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
+++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
@@ -957,19 +957,6 @@ class ParagraphsWidget extends WidgetBase {
       ],
     ];
 
-    // Hidden field provided by "Modal" mode. Field is provided for additional
-    // integrations, where also position of addition can be specified. It should
-    // be used by sub-modules or other paragraphs integration. CSS class is used
-    // to support easier element selecting in JavaScript.
-    $element['add_modal_form_area']['add_more_delta'] = [
-      '#type' => 'hidden',
-      '#attributes' => [
-        'class' => [
-          'paragraph-type-add-modal-delta',
-        ],
-      ],
-    ];
-
     $element['#attached']['library'][] = 'paragraphs/drupal.paragraphs.modal';
     if ($this->isFeatureEnabled('add_above')) {
       $element['#attached']['library'][] = 'paragraphs/drupal.paragraphs.add_above_button';
@@ -1200,6 +1187,20 @@ class ParagraphsWidget extends WidgetBase {
       $elements['add_more'] = $this->buildAddActions();
       // Add the class to hide the add actions in the Behavior perspective.
       $elements['add_more']['#attributes']['class'][] = 'paragraphs-add-wrapper';
+
+      // Hidden field is provided for additional integrations, where also
+      // position of addition can be specified. It should be used by sub-modules
+      // or other paragraphs integration. CSS class is used to support easier
+      // element selecting in JavaScript.
+      $elements['add_more']['add_more_delta'] = [
+        '#type' => 'hidden',
+        '#attributes' => [
+          'class' => [
+            'paragraph-type-add-delta',
+            $this->getSetting('add_mode')
+          ],
+        ],
+      ];
     }
 
     $elements['#allow_reference_changes'] = $this->allowReferenceChanges();
@@ -1710,7 +1711,7 @@ class ParagraphsWidget extends WidgetBase {
     // Clear the Add more delta.
     NestedArray::setValue(
       $element,
-      ['add_more', 'add_modal_form_area', 'add_more_delta', '#value'],
+      ['add_more', 'add_more_delta', '#value'],
       ''
     );
 
@@ -1794,7 +1795,7 @@ class ParagraphsWidget extends WidgetBase {
       $field_path = array_merge($submit['element']['#field_parents'], [$submit['element']['#field_name']]);
       $add_more_delta = NestedArray::getValue(
         $submit['element'],
-        ['add_more', 'add_modal_form_area', 'add_more_delta', '#value']
+        ['add_more', 'add_more_delta', '#value']
       );
 
       static::prepareDeltaPosition($submit['widget_state'], $form_state, $field_path, $add_more_delta);