diff --git a/e2e-tests/specs/customizer/hfg/hfg-footer-mobile.spec.ts b/e2e-tests/specs/customizer/hfg/hfg-footer-mobile.spec.ts
index bc4945e4c7..4dce308819 100644
--- a/e2e-tests/specs/customizer/hfg/hfg-footer-mobile.spec.ts
+++ b/e2e-tests/specs/customizer/hfg/hfg-footer-mobile.spec.ts
@@ -44,4 +44,16 @@ test.describe('Different Footer for Mobile vs Desktop', function () {
 			page.locator('.hfg_footer .nav-menu-footer')
 		).toBeVisible();
 	});
+
+	test('Check IDs are unique', async ({ page }) => {
+		await page.goto('/?test_name=hfgFooterMobile');
+
+		await expect(page.locator('#cb-row--footer-bottom')).toHaveCount(0);
+		await expect(
+			page.locator('#cb-row--footer-desktop-bottom')
+		).toHaveCount(1);
+		await expect(page.locator('#cb-row--footer-mobile-bottom')).toHaveCount(
+			1
+		);
+	});
 });
diff --git a/header-footer-grid/templates/footer-row-wrapper.php b/header-footer-grid/templates/footer-row-wrapper.php
index b07cd019ba..44bc08d678 100644
--- a/header-footer-grid/templates/footer-row-wrapper.php
+++ b/header-footer-grid/templates/footer-row-wrapper.php
@@ -43,7 +43,7 @@
 $row_wrapper_classes = join( ' ', $row_wrapper_classes );
 ?>
 <div class="<?php echo esc_attr( join( ' ', $row_classes ) ); ?>"
-	id="cb-row--footer-<?php echo esc_attr( $row_index ); ?>"
+	id="cb-row--footer-<?php echo esc_attr( $device ); ?>-<?php echo esc_attr( $row_index ); ?>"
 	data-row-id="<?php echo esc_attr( $row_index ); ?>" data-show-on="<?php echo esc_attr( $device ); ?>">
 	<div
 		class="footer--row-inner footer-<?php echo esc_attr( $row_index ); ?>-inner footer-content-wrap">