diff --git a/core/modules/image/tests/src/FunctionalJavascript/QuickEditImageEditorTestTrait.php b/core/modules/image/tests/src/FunctionalJavascript/QuickEditImageEditorTestTrait.php
index 704e4e7020..ed54bde874 100644
--- a/core/modules/image/tests/src/FunctionalJavascript/QuickEditImageEditorTestTrait.php
+++ b/core/modules/image/tests/src/FunctionalJavascript/QuickEditImageEditorTestTrait.php
@@ -14,7 +14,7 @@
   protected function awaitImageEditor() {
     $this->assertJsCondition('document.querySelector(".quickedit-image-field-info") !== null', 10000);
 
-    $quickedit_entity_toolbar = $this->getSession()->getPage()->findById('quickedit-entity-toolbar');
+    $quickedit_entity_toolbar = $this->getSession()->getPage()->find('css', '.quickedit-toolbar-container');
     $this->assertNotNull($quickedit_entity_toolbar->find('css', 'form.quickedit-image-field-info input[name="alt"]'));
   }
 
@@ -25,7 +25,7 @@ protected function awaitImageEditor() {
    *   The text to type.
    */
   protected function typeInImageEditorAltTextInput($text) {
-    $quickedit_entity_toolbar = $this->getSession()->getPage()->findById('quickedit-entity-toolbar');
+    $quickedit_entity_toolbar = $this->getSession()->getPage()->find('css', '.quickedit-toolbar-container');
     $input = $quickedit_entity_toolbar->find('css', 'form.quickedit-image-field-info input[name="alt"]');
     $input->setValue($text);
   }
diff --git a/core/modules/quickedit/css/quickedit.module.css b/core/modules/quickedit/css/quickedit.module.css
index 4c55a9a4f7..12e2c3fa1b 100644
--- a/core/modules/quickedit/css/quickedit.module.css
+++ b/core/modules/quickedit/css/quickedit.module.css
@@ -112,7 +112,7 @@
 .quickedit-toolbar-label {
   overflow: hidden;
 }
-#quickedit-toolbar-fence {
+.quickedit-toolbar-fence {
   position: fixed;
   z-index: -1;
   top: 0;
diff --git a/core/modules/quickedit/js/theme.es6.js b/core/modules/quickedit/js/theme.es6.js
index 17640feec0..dcbf87c989 100644
--- a/core/modules/quickedit/js/theme.es6.js
+++ b/core/modules/quickedit/js/theme.es6.js
@@ -70,11 +70,15 @@
   /**
    * Element defining a containing box for the placement of the entity toolbar.
    *
+   * @param {object} settings
+   *   Settings object used to construct the markup.
+   * @param {string} settings.id
+   *   The id to apply to the containing box.
    * @return {string}
    *   The corresponding HTML.
    */
-  Drupal.theme.quickeditEntityToolbarFence = function() {
-    return '<div id="quickedit-toolbar-fence" />';
+  Drupal.theme.quickeditEntityToolbarFence = function(settings) {
+    return `<div id="${settings.id}" class="quickedit-toolbar-fence"/>`;
   };
 
   /**
diff --git a/core/modules/quickedit/js/theme.js b/core/modules/quickedit/js/theme.js
index 8b12cd7651..70f86d50e0 100644
--- a/core/modules/quickedit/js/theme.js
+++ b/core/modules/quickedit/js/theme.js
@@ -29,8 +29,8 @@
     return '<span class="field">' + Drupal.checkPlain(settings.fieldLabel) + '</span>' + Drupal.checkPlain(settings.entityLabel);
   };
 
-  Drupal.theme.quickeditEntityToolbarFence = function () {
-    return '<div id="quickedit-toolbar-fence" />';
+  Drupal.theme.quickeditEntityToolbarFence = function (settings) {
+    return '<div id="' + settings.id + '" class="quickedit-toolbar-fence"/>';
   };
 
   Drupal.theme.quickeditFieldToolbar = function (settings) {
diff --git a/core/modules/quickedit/js/views/EntityToolbarView.es6.js b/core/modules/quickedit/js/views/EntityToolbarView.es6.js
index 35f125ed97..0ba3565866 100644
--- a/core/modules/quickedit/js/views/EntityToolbarView.es6.js
+++ b/core/modules/quickedit/js/views/EntityToolbarView.es6.js
@@ -11,6 +11,16 @@
        */
       _fieldToolbarRoot: null,
 
+      /**
+       * @type {string}
+       */
+      _toolbar_id: null,
+
+      /**
+       * @type {string}
+       */
+      _fence_id: null,
+
       /**
        * @return {object}
        *   A map of events.
@@ -39,6 +49,10 @@
         this.appModel = options.appModel;
         this.$entity = $(this.model.get('el'));
 
+        // Generate the DOM-compatible IDs.
+        this._toolbar_id = `quickedit-entity-toolbar-for-${this.model.cid}`;
+        this._fence_id = `quickedit-toolbar-fence-for-${this.model.cid}`;
+
         // Rerender whenever the entity state changes.
         this.listenTo(
           this.model,
@@ -97,13 +111,17 @@
         if (this.model.get('isActive')) {
           // If the toolbar container doesn't exist, create it.
           const $body = $('body');
-          if ($body.children('#quickedit-entity-toolbar').length === 0) {
+          if ($body.children(`#${this._toolbar_id}`).length === 0) {
             $body.append(this.$el);
           }
           // The fence will define a area on the screen that the entity toolbar
           // will be position within.
-          if ($body.children('#quickedit-toolbar-fence').length === 0) {
-            this.$fence = $(Drupal.theme('quickeditEntityToolbarFence'))
+          if ($body.children(`#${this._fence_id}`).length === 0) {
+            this.$fence = $(
+              Drupal.theme('quickeditEntityToolbarFence', {
+                id: this._fence_id,
+              }),
+            )
               .css(Drupal.displace())
               .appendTo($body);
           }
@@ -443,7 +461,7 @@
       buildToolbarEl() {
         const $toolbar = $(
           Drupal.theme('quickeditEntityToolbar', {
-            id: 'quickedit-entity-toolbar',
+            id: this._toolbar_id,
           }),
         );
 
diff --git a/core/modules/quickedit/js/views/EntityToolbarView.js b/core/modules/quickedit/js/views/EntityToolbarView.js
index 30dd7fa2da..e08bc975c4 100644
--- a/core/modules/quickedit/js/views/EntityToolbarView.js
+++ b/core/modules/quickedit/js/views/EntityToolbarView.js
@@ -9,6 +9,10 @@
   Drupal.quickedit.EntityToolbarView = Backbone.View.extend({
     _fieldToolbarRoot: null,
 
+    _toolbar_id: null,
+
+    _fence_id: null,
+
     events: function events() {
       var map = {
         'click button.action-save': 'onClickSave',
@@ -22,6 +26,9 @@
       this.appModel = options.appModel;
       this.$entity = $(this.model.get('el'));
 
+      this._toolbar_id = 'quickedit-entity-toolbar-for-' + this.model.cid;
+      this._fence_id = 'quickedit-toolbar-fence-for-' + this.model.cid;
+
       this.listenTo(this.model, 'change:isActive change:isDirty change:state', this.render);
 
       this.listenTo(this.appModel, 'change:highlightedField change:activeField', this.render);
@@ -45,12 +52,14 @@
     render: function render() {
       if (this.model.get('isActive')) {
         var $body = $('body');
-        if ($body.children('#quickedit-entity-toolbar').length === 0) {
+        if ($body.children('#' + this._toolbar_id).length === 0) {
           $body.append(this.$el);
         }
 
-        if ($body.children('#quickedit-toolbar-fence').length === 0) {
-          this.$fence = $(Drupal.theme('quickeditEntityToolbarFence')).css(Drupal.displace()).appendTo($body);
+        if ($body.children('#' + this._fence_id).length === 0) {
+          this.$fence = $(Drupal.theme('quickeditEntityToolbarFence', {
+            id: this._fence_id
+          })).css(Drupal.displace()).appendTo($body);
         }
 
         this.label();
@@ -243,7 +252,7 @@
     },
     buildToolbarEl: function buildToolbarEl() {
       var $toolbar = $(Drupal.theme('quickeditEntityToolbar', {
-        id: 'quickedit-entity-toolbar'
+        id: this._toolbar_id
       }));
 
       $toolbar.find('.quickedit-toolbar-entity').prepend(Drupal.theme('quickeditToolgroup', {
diff --git a/core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditIntegrationTest.php b/core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditIntegrationTest.php
index 24f36d440e..ce6098e5de 100644
--- a/core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditIntegrationTest.php
+++ b/core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditIntegrationTest.php
@@ -214,7 +214,7 @@ public function testArticleNode() {
       'node/1/body/en/full'       => '.cke_editable_inline',
       'node/1/field_tags/en/full' => ':not(.quickedit-editor-is-popup)',
     ]);
-    $this->assertSession()->elementExists('css', '#quickedit-entity-toolbar .quickedit-toolgroup.wysiwyg-main > .cke_chrome .cke_top[role="presentation"] .cke_toolbar[role="toolbar"] .cke_toolgroup[role="presentation"] > .cke_button[title~="Bold"][role="button"]');
+    $this->assertSession()->elementExists('css', '.quickedit-toolbar-container .quickedit-toolgroup.wysiwyg-main > .cke_chrome .cke_top[role="presentation"] .cke_toolbar[role="toolbar"] .cke_toolgroup[role="presentation"] > .cke_button[title~="Bold"][role="button"]');
 
     // Wait for the validating & saving of the title to complete.
     $this->awaitEntityInstanceFieldState('node', 1, 0, 'title', 'en', 'candidate');
@@ -342,7 +342,7 @@ public function testCustomBlock() {
     $this->assertEntityInstanceFieldMarkup('block_content', 1, 0, [
       'block_content/1/body/en/full' => '.cke_editable_inline',
     ]);
-    $this->assertSession()->elementExists('css', '#quickedit-entity-toolbar .quickedit-toolgroup.wysiwyg-main > .cke_chrome .cke_top[role="presentation"] .cke_toolbar[role="toolbar"] .cke_toolgroup[role="presentation"] > .cke_button[title~="Bold"][role="button"]');
+    $this->assertSession()->elementExists('css', '.quickedit-toolbar-container .quickedit-toolgroup.wysiwyg-main > .cke_chrome .cke_top[role="presentation"] .cke_toolbar[role="toolbar"] .cke_toolgroup[role="presentation"] > .cke_button[title~="Bold"][role="button"]');
   }
 
 }
diff --git a/core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditJavascriptTestBase.php b/core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditJavascriptTestBase.php
index 8afc3242b6..07c33a77a9 100644
--- a/core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditJavascriptTestBase.php
+++ b/core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditJavascriptTestBase.php
@@ -110,7 +110,7 @@ protected function startQuickEditViaToolbar($entity_type_id, $entity_id, $entity
    * Clicks the 'Save' button in the Quick Edit entity toolbar.
    */
   protected function saveQuickEdit() {
-    $quickedit_entity_toolbar = $this->getSession()->getPage()->findById('quickedit-entity-toolbar');
+    $quickedit_entity_toolbar = $this->getSession()->getPage()->find('css', '.quickedit-toolbar-container');
     $save_button = $quickedit_entity_toolbar->find('css', 'button.action-save');
     $save_button->press();
     $this->assertSame('Saving', $save_button->getText());
@@ -159,11 +159,11 @@ protected function awaitEntityInstanceFieldState($entity_type_id, $entity_id, $e
    *   The expected label in the Quick Edit Entity Toolbar.
    */
   protected function assertQuickEditEntityToolbar($expected_entity_label, $expected_field_label) {
-    $quickedit_entity_toolbar = $this->getSession()->getPage()->findById('quickedit-entity-toolbar');
+    $quickedit_entity_toolbar = $this->getSession()->getPage()->find('css', '.quickedit-toolbar-container');
     // We cannot use ->getText() because it also returns the text of all child
     // nodes. We also cannot use XPath to select text node in Selenium. So we
     // use JS expression to select only the text node.
-    $this->assertSame($expected_entity_label, $this->getSession()->evaluateScript("return window.jQuery('#quickedit-entity-toolbar .quickedit-toolbar-label').clone().children().remove().end().text();"));
+    $this->assertSame($expected_entity_label, $this->getSession()->evaluateScript("return window.jQuery('.quickedit-toolbar-container .quickedit-toolbar-label').clone().children().remove().end().text();"));
     if ($expected_field_label !== NULL) {
       $field_label = $quickedit_entity_toolbar->find('css', '.quickedit-toolbar-label > .field');
       // Only try to find the text content of the element if it was actually
diff --git a/core/modules/settings_tray/tests/src/FunctionalJavascript/QuickEditIntegrationTest.php b/core/modules/settings_tray/tests/src/FunctionalJavascript/QuickEditIntegrationTest.php
index 6ee2e51fd9..ace3b73195 100644
--- a/core/modules/settings_tray/tests/src/FunctionalJavascript/QuickEditIntegrationTest.php
+++ b/core/modules/settings_tray/tests/src/FunctionalJavascript/QuickEditIntegrationTest.php
@@ -47,7 +47,7 @@ protected function setUp() {
    * Tests QuickEdit links behavior.
    */
   public function testQuickEditLinks() {
-    $quick_edit_selector = '#quickedit-entity-toolbar';
+    $quick_edit_selector = '.quickedit-toolbar-container';
     $node_selector = '[data-quickedit-entity-id="node/1"]';
     $body_selector = '[data-quickedit-field-id="node/1/body/en/full"]';
     $web_assert = $this->assertSession();
diff --git a/core/themes/stable/css/quickedit/quickedit.module.css b/core/themes/stable/css/quickedit/quickedit.module.css
index 4c55a9a4f7..12e2c3fa1b 100644
--- a/core/themes/stable/css/quickedit/quickedit.module.css
+++ b/core/themes/stable/css/quickedit/quickedit.module.css
@@ -112,7 +112,7 @@
 .quickedit-toolbar-label {
   overflow: hidden;
 }
-#quickedit-toolbar-fence {
+.quickedit-toolbar-fence {
   position: fixed;
   z-index: -1;
   top: 0;