diff --git a/js/paragraphs.admin.js b/js/paragraphs.admin.js
index 779fe0d..3290fd8 100644
--- a/js/paragraphs.admin.js
+++ b/js/paragraphs.admin.js
@@ -3,66 +3,111 @@
   'use strict';
 
   /**
-   * For body tag, adds tabs for selecting how the content will be displayed.
-   *
-   * @type {Drupal~behavior}
-   */
-  Drupal.behaviors.bodyTabs = {
-    attach: function (context, settings) {
-      /** Set content fields to visible when tabs are created. After an action
-       * being performed, stay on the same perspective. **/
-      if($(context).find('.layout-region-node-main').hasClass('behavior-active')) {
-        $(context).find('.layout-region-node-main').removeClass('content-active');
-        $(context).find('.layout-region-node-main').addClass('behavior-active');
-        $(context).find('.paragraphs-tabs').find('#content').removeClass('is-active');
-        $(context).find('.paragraphs-tabs').find('#behavior').addClass('is-active');
-        $('.paragraphs-content').hide();
-        $('.paragraphs-behavior').show();
+  * Set content fields to visible when tabs are created. After an action
+  * being performed, stay on the same perspective.
+  *
+  * @param $parWidget
+  *   Paragraphs widget.
+  * @param $parTabs
+  *   Paragraphs tabs.
+  * @param $parContent
+  *   Paragraphs content tab.
+  * @param $parBehavior
+  *   Paragraphs behavior tab.
+  * @param $mainRegion
+  *   Main paragraph region.
+  */
+  var setUpTab = function ($parWidget, $parTabs, $parContent, $parBehavior, $mainRegion) {
+    var $tabContent = $parTabs.find('#content');
+    var $tabBehavior = $parTabs.find('#behavior');
+    if ($tabBehavior.hasClass('is-active')) {
+      $parWidget.removeClass('content-active').addClass('behavior-active');
+      $tabContent.removeClass('is-active');
+      $tabBehavior.addClass('is-active');
+      $parContent.hide();
+      $parBehavior.show();
+    }
+    else {
+      // Activate content tab visually if there is no previously
+      // activated tab.
+      if (!($mainRegion.hasClass('content-active'))
+        && !($mainRegion.hasClass('behavior-active'))) {
+        $tabContent.addClass('is-active');
+        $mainRegion.addClass('content-active');
       }
-      else {
-        /** Activate content tab visually if there is no previously activated
-         * tab. */
-        if (!($(context).find('.layout-region-node-main').hasClass('content-active')) && !($(context).find('.layout-region-node-main').hasClass('behavior-active'))) {
-          $(context).find('.paragraphs-tabs').find('#content').addClass('is-active');
-          $(context).find('.layout-region-node-main').addClass('content-active');
-        }
-        $('.paragraphs-content').show();
-        $('.paragraphs-behavior').hide();
+
+      $parContent.show();
+      $parBehavior.hide();
+
+      $parTabs.show();
+      if ($parBehavior.length === 0) {
+        $parTabs.hide();
       }
-      /** Checking the number of behavior elements and showing tabs only if there
-       * are behavior elements.
-       */
-      if($('.paragraphs-behavior').length != 0) {
-        $(context).find('.paragraphs-tabs-wrapper').find('.paragraphs-tabs').show();
+    }
+  };
+
+  /**
+  * Switching active class between tabs.
+  * @param $parTabs
+  *   Paragraphs tabs.
+  * @param $clickedTab
+  *   Clicked tab.
+  * @param $parWidget
+  *   Paragraphs widget.
+  */
+  var switchActiveClass = function ($parTabs, $clickedTab, $parWidget) {
+      $parTabs.find('li').removeClass('is-active');
+      $clickedTab.parent('li').addClass('is-active');
+      $parWidget.removeClass('behavior-active content-active is-active');
+      $($parWidget).find($clickedTab.attr('href')).addClass('is-active');
+
+      if($parWidget.find('#content').hasClass('is-active')) {
+          $parWidget.find('.layout-region-node-main').addClass('content-active');
+          $parWidget.find('.paragraphs-content').show();
+          $parWidget.find('.paragraphs-behavior').hide();
       }
-      else {
-        $(context).find('.paragraphs-tabs-wrapper').find('.paragraphs-tabs').hide();
+
+      if($parWidget.find('#behavior').hasClass('is-active')) {
+          $parWidget.find('.layout-region-node-main').addClass('behavior-active');
+          $parWidget.find('.paragraphs-content').hide();
+          $parWidget.find('.paragraphs-behavior').show();
       }
-      /** Create click event. **/
-      $(context).find('.paragraphs-tabs').find('a').click(function(e) {
-        e.preventDefault();
-        /** Switching active class between tabs. */
-        var el = jQuery(this);
-        $(context).find('.paragraphs-tabs').find('li').removeClass('is-active');
-        el.parent('li').addClass('is-active');
-        $(context).find('.layout-region-node-main').removeClass('behavior-active');
-        $(context).find('.layout-region-node-main').removeClass('content-active');
-        $(context).find('.paragraphs-tabs-wrapper').removeClass('is-active');
-        $(context).find(el.attr('href')).addClass('is-active');
-        /** Show/Hide fields based on current active class. */
-        if($(context).find('.paragraphs-tabs-wrapper').find('#content').hasClass('is-active')) {
-          $(context).find('.layout-region-node-main').addClass('content-active');
-          $('.paragraphs-content').show();
-          $('.paragraphs-behavior').hide();
-        }
-        if($(context).find('.paragraphs-tabs-wrapper').find('#behavior').hasClass('is-active')) {
-          $(context).find('.layout-region-node-main').addClass('behavior-active');
-          $('.paragraphs-content').hide();
-          $('.paragraphs-behavior').show();
-        }
-      } );
-    }
   };
 
+  /**
+  * For body tag, adds tabs for selecting how the content will be displayed.
+  *
+  * @type {Drupal~behavior}
+  */
+  Drupal.behaviors.bodyTabs = {
+    attach: function (context) {
+      var $topLevelParWidgets = $('.paragraphs-tabs-wrapper', context).filter(function(){
+        return $(this).parents('.paragraphs-nested').length === 0;
+      });
+
+      //Initialization.
+      $topLevelParWidgets.once('paragraphs-bodytabs').each(function() {
+        var $parWidget = $(this);
+        var $parTabs = $parWidget.find('.paragraphs-tabs');
+
+        // Create click event.
+        $parTabs.find('a').click(function(e) {
+          e.preventDefault();
+            switchActiveClass($parTabs, $(this), $parWidget);
+        });
+      });
+
+      if ($('.paragraphs-tabs-wrapper', context).length > 0) {
+        $topLevelParWidgets.each(function() {
+          var $parWidget = $(this);
+          var $parTabs = $parWidget.find('.paragraphs-tabs');
+          var $parContent = $parWidget.find('.paragraphs-content');
+          var $parBehavior = $parWidget.find('.paragraphs-behavior');
+          var $mainRegion = $parWidget.find('.layout-region-node-main');
+          setUpTab($parWidget, $parTabs, $parContent, $parBehavior, $mainRegion);
+        });
+      }
+    }
+  };
 })(jQuery, Drupal);
 
diff --git a/src/Plugin/Field/FieldWidget/ParagraphsWidget.php b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
index 605325e..55fe655 100644
--- a/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
+++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
@@ -766,11 +766,15 @@ class ParagraphsWidget extends WidgetBase {
     // If the parent entity is paragraph add the nested class if not then add
     // the perspective tabs.
     $field_prefix = strtr($this->fieldIdPrefix, '_', '-');
-    if ($max > 0 && $items->getEntity()->getEntityTypeId() != 'paragraph') {
-      $tabs = '<ul class="paragraphs-tabs tabs primary clearfix"><li id="content" class="tabs__tab"><a href="#' . $field_prefix . '-values">Content</a></li><li id="behavior" class="tabs__tab"><a href="#' . $field_prefix . '-values">Behavior</a></li></ul>';
+    if (count($this->fieldParents) == 0) {
+      if ($items->getEntity()->getEntityTypeId() != 'paragraph') {
+        $tabs = '<ul class="paragraphs-tabs tabs primary clearfix"><li id="content" class="tabs__tab"><a href="#' . $field_prefix . '-values">Content</a></li><li id="behavior" class="tabs__tab"><a href="#' . $field_prefix . '-values">Behavior</a></li></ul>';
+      }
     }
-    else {
-      $form['#attributes']['class'][] = 'paragraphs-nested';
+    if (count($this->fieldParents) > 0) {
+      if ($items->getEntity()->getEntityTypeId() === 'paragraph') {
+        $form['#attributes']['class'][] = 'paragraphs-nested';
+      }
     }
     $elements['#prefix'] = '<div class="is-horizontal paragraphs-tabs-wrapper" id="' . $this->fieldWrapperId . '">' . $tabs;
     $elements['#suffix'] = '</div>';
diff --git a/tests/src/FunctionalJavascript/ParagraphsExperimentalEditPerspectivesUiTest.php b/tests/src/FunctionalJavascript/ParagraphsExperimentalEditPerspectivesUiTest.php
index 824b26b..8d42a86 100644
--- a/tests/src/FunctionalJavascript/ParagraphsExperimentalEditPerspectivesUiTest.php
+++ b/tests/src/FunctionalJavascript/ParagraphsExperimentalEditPerspectivesUiTest.php
@@ -17,6 +17,7 @@ use Drupal\Tests\paragraphs\FunctionalJavascript\LoginAdminTrait;
 class ParagraphsExperimentalEditPerspectivesUiTest extends JavascriptTestBase {
 
   use LoginAdminTrait;
+  use ParagraphsTestBaseTrait;
 
   /**
    * Modules to enable.
@@ -133,4 +134,37 @@ class ParagraphsExperimentalEditPerspectivesUiTest extends JavascriptTestBase {
     $this->assertFalse($style_selector->isVisible());
   }
 
+  /**
+   * Test edi perspectives works fine with multiple fields.
+   */
+  public function testPerspectivesWithMultipleFields() {
+    $this->loginAsAdmin([
+      'access content overview',
+    ]);
+
+    // Add a nested Paragraph type.
+    $paragraph_type = 'nested_paragraph';
+    $this->addParagraphsType($paragraph_type);
+    $this->addParagraphsField('nested_paragraph', 'paragraphs', 'paragraph');
+
+    // Add a nested Paragraph type.
+    $paragraph_type = 'nested_paragraph2';
+    $this->addParagraphsType($paragraph_type);
+    $this->addParagraphsField('nested_paragraph2', 'paragraphs', 'paragraph');
+
+    // Enable plugins for the nested paragraph type.
+    $edit = [
+      'behavior_plugins[test_bold_text][enabled]' => TRUE,
+    ];
+    $this->drupalPostForm('admin/structure/paragraphs_type/' . $paragraph_type, $edit, t('Save'));
+
+    $this->addParagraphedContentType('testcontent', 'nested_paragraph');
+
+    $this->drupalGet('node/add/testcontent');
+    $this->assertSession()->responseNotContains('paragraphs-nested');
+    $this->drupalPostForm(NULL, [], 'Add nested_paragraph');
+    $this->assertSession()->assertWaitOnAjaxRequest();
+    $this->assertSession()->responseContains('paragraphs-nested');
+  }
+
 }