diff --git a/public/app/features/plugins/sql/components/QueryHeader.tsx b/public/app/features/plugins/sql/components/QueryHeader.tsx
index 37869dbe1a5..5b7adb502fe 100644
--- a/public/app/features/plugins/sql/components/QueryHeader.tsx
+++ b/public/app/features/plugins/sql/components/QueryHeader.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
+import { v4 as uuidv4 } from 'uuid';
 
 import { SelectableValue } from '@grafana/data';
 import { EditorField, EditorHeader, EditorMode, EditorRow, FlexItem, InlineSelect, Space } from '@grafana/experimental';
@@ -131,7 +132,7 @@ export function QueryHeader({
         {editorMode === EditorMode.Builder && (
           <>
             <InlineSwitch
-              id="sql-filter"
+              id={`sql-filter-${uuidv4()}}`}
               label="Filter"
               transparent={true}
               showLabel={true}
@@ -151,7 +152,7 @@ export function QueryHeader({
             />
 
             <InlineSwitch
-              id="sql-group"
+              id={`sql-group-${uuidv4()}}`}
               label="Group"
               transparent={true}
               showLabel={true}
@@ -171,7 +172,7 @@ export function QueryHeader({
             />
 
             <InlineSwitch
-              id="sql-order"
+              id={`sql-order-${uuidv4()}}`}
               label="Order"
               transparent={true}
               showLabel={true}
@@ -191,7 +192,7 @@ export function QueryHeader({
             />
 
             <InlineSwitch
-              id="sql-preview"
+              id={`sql-preview-${uuidv4()}}`}
               label="Preview"
               transparent={true}
               showLabel={true}