diff --git a/core/modules/views_ui/js/views-admin.js b/core/modules/views_ui/js/views-admin.js
index d0534cf..286b833 100644
--- a/core/modules/views_ui/js/views-admin.js
+++ b/core/modules/views_ui/js/views-admin.js
@@ -551,10 +551,7 @@
      *   form button that should be clicked.
      */
     clickRemoveGroupButton: function (event) {
-      // For some reason, here we only need to trigger .submit(), unlike for
-      // Drupal.viewsUi.RearrangeFilterHandler.prototype.clickAddGroupButton()
-      // where we had to trigger .mousedown() also.
-      this.table.find('#' + event.data.buttonId).trigger('submit');
+      this.table.find('#' + event.data.buttonId).trigger('mousedown').trigger('submit');
       event.preventDefault();
     },
 
@@ -567,7 +564,11 @@
       var newRow;
       var titleRow;
 
-      var titleRows = $('tr.views-group-title');
+      var titleRows = $('tr.views-group-title').once('duplicateGroupsOperator');
+
+      if (!titleRows.length) {
+        return this.operator;
+      }
 
       // Get rid of the explanatory text around the operator; its placement is
       // explanatory enough.
@@ -579,14 +580,6 @@
 
       // Move the operator to a new row just above the second group.
       titleRow = $('tr#views-group-title-2');
-      this.operator.find('label').add('div.description').addClass('visually-hidden');
-      this.operator.find('select').addClass('form-select');
-
-      // Keep a list of the operator dropdowns, so we can sync their behavior later.
-      dropdowns = this.operator;
-
-      // Move the operator to a new row just above the second group.
-      titleRow = $('tr#views-group-title-2');
       newRow = $('<tr class="filter-group-operator-row"><td colspan="5"></td></tr>');
       newRow.find('td').append(this.operator);
       newRow.insertBefore(titleRow);
diff --git a/core/modules/views_ui/src/Form/Ajax/RearrangeFilter.php b/core/modules/views_ui/src/Form/Ajax/RearrangeFilter.php
index 1b8e18d..09cd564 100644
--- a/core/modules/views_ui/src/Form/Ajax/RearrangeFilter.php
+++ b/core/modules/views_ui/src/Form/Ajax/RearrangeFilter.php
@@ -18,6 +18,13 @@
 class RearrangeFilter extends ViewsFormBase {
 
   /**
+   * Constructs a new RearrangeFilter object.
+   */
+  public function __construct($type = NULL) {
+    $this->setType($type);
+  }
+
+  /**
    * {@inheritdoc}
    */
   public function getFormKey() {
@@ -128,6 +135,7 @@ public function buildForm(array $form, FormStateInterface $form_state) {
             'class' => array('views-remove-group'),
           ),
           '#group' => $id,
+          '#ajax' => ['url' => NULL],
         );
       }
       $group_options[$id] = $id == 1 ? $this->t('Default group') : $this->t('Group @group', array('@group' => $id));
@@ -208,6 +216,7 @@ public function buildForm(array $form, FormStateInterface $form_state) {
       '#value' => $this->t('Create new filter group'),
       '#id' => 'views-add-group',
       '#group' => 'add',
+      '#ajax' => ['url' => NULL],
     );
 
     return $form;
@@ -259,16 +268,16 @@ public function submitForm(array &$form, FormStateInterface $form_state) {
 
     // If the #group property is set on the clicked button, that means we are
     // either adding or removing a group, not actually updating the filters.
-    $clicked_button = $form_state->get('clicked_button');
-    if (!empty($clicked_button['#group'])) {
-      if ($clicked_button['#group'] == 'add') {
+    $triggering_element = $form_state->getTriggeringElement();
+    if (!empty($triggering_element['#group'])) {
+      if ($triggering_element['#group'] == 'add') {
         // Add a new group
         $groups['groups'][] = 'AND';
       }
       else {
         // Renumber groups above the removed one down.
         foreach (array_keys($groups['groups']) as $group_id) {
-          if ($group_id >= $clicked_button['#group']) {
+          if ($group_id >= $triggering_element['#group']) {
             $old_group = $group_id + 1;
             if (isset($groups['groups'][$old_group])) {
               $groups['groups'][$group_id] = $groups['groups'][$old_group];
diff --git a/core/modules/views_ui/src/Tests/FilterUITest.php b/core/modules/views_ui/src/Tests/FilterUITest.php
index 4d8f5fe..046b166 100644
--- a/core/modules/views_ui/src/Tests/FilterUITest.php
+++ b/core/modules/views_ui/src/Tests/FilterUITest.php
@@ -73,6 +73,26 @@ public function testFiltersUI() {
     $this->drupalGet('admin/structure/views/view/test_filter_groups');
 
     $this->assertLink('Content: Node ID (= 1)', 0, 'Content: Node ID (= 1) link appears correctly.');
+
+    // Tests that we can create a new filter group from UI.
+    $this->drupalGet('admin/structure/views/nojs/rearrange-filter/test_filter_groups/page');
+    $this->assertNoRaw('<span>Group 3</span>', 'Group 3 has not been added yet.');
+
+    // Create 2 new groups.
+    $this->drupalPostForm(NULL, [], t('Create new filter group'));
+    $this->drupalPostForm(NULL, [], t('Create new filter group'));
+
+    // Remove the new group 3.
+    $this->drupalPostForm(NULL, [], t('Remove group 3'));
+
+    // Verify that the group 4 is now named as 3.
+    $this->assertRaw('<span>Group 3</span>', 'Group 3 still exists.');
+
+    // Remove the group 3 again.
+    $this->drupalPostForm(NULL, [], t('Remove group 3'));
+
+    // Group 3 now does not exist.
+    $this->assertNoRaw('<span>Group 3</span>', 'Group 3 has not been added yet.');
   }
 
 }