diff --git a/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx b/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx
index 416b97dcbd..9c146c7462 100644
--- a/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx
+++ b/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx
@@ -77,12 +77,14 @@ export const AddNewRelation: React.FC<Props> = ({ path, hasMany, relationTo, val
   }, [modalState, modalSlug]);
 
   return hasPermission ? (
-    <div className={baseClass}>
+    <div
+      className={baseClass}
+      id={`${path}-add-new`}
+    >
       {relatedCollections.length === 1 && (
         <Button
           className={`${baseClass}__add-button`}
           onClick={() => openModal(relatedCollections[0])}
-          id={`${path}-add-new`}
           buttonStyle="none"
           tooltip={`Add new ${relatedCollections[0].labels.singular}`}
         >
@@ -97,7 +99,6 @@ export const AddNewRelation: React.FC<Props> = ({ path, hasMany, relationTo, val
           button={(
             <Button
               className={`${baseClass}__add-button`}
-              id={`${path}-add-new`}
               buttonStyle="none"
               tooltip={popupOpen ? undefined : 'Add new'}
             >
@@ -111,7 +112,7 @@ export const AddNewRelation: React.FC<Props> = ({ path, hasMany, relationTo, val
                   return (
                     <li key={relatedCollection.slug}>
                       <button
-                        className={`${baseClass}__relation-button`}
+                        className={`${baseClass}__relation-button ${baseClass}__relation-button--${relatedCollection.slug}`}
                         type="button"
                         onClick={() => { closePopup(); openModal(relatedCollection); }}
                       >
diff --git a/test/fields/collections/Relationship/index.ts b/test/fields/collections/Relationship/index.ts
index 7f54aac0b3..aba49d6254 100644
--- a/test/fields/collections/Relationship/index.ts
+++ b/test/fields/collections/Relationship/index.ts
@@ -8,7 +8,7 @@ const RelationshipFields: CollectionConfig = {
     {
       name: 'relationship',
       type: 'relationship',
-      relationTo: ['uploads', 'array-fields'],
+      relationTo: ['text-fields', 'array-fields'],
       required: true,
     },
     {
diff --git a/test/fields/e2e.spec.ts b/test/fields/e2e.spec.ts
index 0f58a86699..5b43fe84a6 100644
--- a/test/fields/e2e.spec.ts
+++ b/test/fields/e2e.spec.ts
@@ -8,6 +8,7 @@ import { arrayFieldsSlug } from './collections/Array';
 import { pointFieldsSlug } from './collections/Point';
 import { tabsSlug } from './collections/Tabs';
 import wait from '../../src/utilities/wait';
+import { relationshipFieldsSlug } from './collections/Relationship';
 
 const { beforeAll, describe } = test;
 
@@ -222,5 +223,75 @@ describe('fields', () => {
         await expect(editLinkModal).not.toBeVisible();
       });
     });
+
+    describe('relationship', () => {
+      let url: AdminUrlUtil;
+
+      beforeAll(() => {
+        url = new AdminUrlUtil(serverURL, relationshipFieldsSlug);
+      });
+
+      test('should create inline relationship within field with many relations', async () => {
+        await page.goto(url.create);
+
+        const button = page.locator('#relationship-add-new .relationship-add-new__add-button');
+        await button.click();
+        await page.locator('.relationship-add-new__relation-button--text-fields').click();
+
+        const textField = page.locator('#field-text');
+        const textValue = 'hello';
+
+        await textField.fill(textValue);
+
+        await page.locator('#relationship-add-modal-depth-1 #action-save').click();
+        await expect(page.locator('.Toastify')).toContainText('successfully');
+
+        await expect(page.locator('#field-relationship .rs__single-value')).toContainText(textValue);
+
+        await page.locator('#action-save').click();
+        await expect(page.locator('.Toastify')).toContainText('successfully');
+      });
+
+      test('should create nested inline relationships', async () => {
+        await page.goto(url.create);
+
+        // Open first modal
+        await page.locator('#relationToSelf-add-new .relationship-add-new__add-button').click();
+
+        // Fill first modal's required relationship field
+        await page.locator('#relationToSelf-add-modal-depth-1 #field-relationship').click();
+        await page.locator('#relationToSelf-add-modal-depth-1 .rs__option:has-text("Seeded text document")').click();
+
+        // Open second modal
+        await page.locator('#relationToSelf-add-modal-depth-1 #relationToSelf-add-new button').click();
+
+        // Fill second modal's required relationship field
+        await page.locator('#relationToSelf-add-modal-depth-2 #field-relationship').click();
+        await page.locator('#relationToSelf-add-modal-depth-2 .rs__option:has-text("Seeded text document")').click();
+
+        // Save second modal
+        await page.locator('#relationToSelf-add-modal-depth-2 #action-save').click();
+
+        // Assert that the first modal is still open
+        // and that the Relation to Self field now has a value in its input
+        await expect(page.locator('#relationToSelf-add-modal-depth-1 #field-relationToSelf .rs__single-value')).toBeVisible();
+
+        // Save first modal
+        await page.locator('#relationToSelf-add-modal-depth-1 #action-save').click();
+
+        await wait(200);
+
+        // Expect the original field to have a value filled
+        await expect(page.locator('#field-relationToSelf .rs__single-value')).toBeVisible();
+
+        // Fill the required field
+        await page.locator('#field-relationship').click();
+        await page.locator('.rs__option:has-text("Seeded text document")').click();
+
+        await page.locator('#action-save').click();
+
+        await expect(page.locator('.Toastify')).toContainText('successfully');
+      });
+    });
   });
 });