From 52a8e269f6836c1684092ffff74c2d5ce9d3f712 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 29 Nov 2024 13:46:15 +0000
Subject: [PATCH 1/7] Bump govuk_publishing_components from 45.6.1 to 46.0.0

Bumps [govuk_publishing_components](https://github.com/alphagov/govuk_publishing_components) from 45.6.1 to 46.0.0.
- [Changelog](https://github.com/alphagov/govuk_publishing_components/blob/main/CHANGELOG.md)
- [Commits](https://github.com/alphagov/govuk_publishing_components/compare/v45.6.1...v46.0.0)

---
updated-dependencies:
- dependency-name: govuk_publishing_components
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 Gemfile.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Gemfile.lock b/Gemfile.lock
index b1ec64087fe..86d6f8ab2fd 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -310,7 +310,7 @@ GEM
     govuk_personalisation (1.1.0)
       plek (>= 1.9.0)
       rails (>= 6, < 9)
-    govuk_publishing_components (45.6.1)
+    govuk_publishing_components (46.0.0)
       chartkick
       govuk_app_config
       govuk_personalisation (>= 0.7.0)

From d31c066fff0351ecda693740750fb80d1adcaadf Mon Sep 17 00:00:00 2001
From: Daniel Karaj <daniel.karaj@digital.cabinet-office.gov.uk>
Date: Fri, 22 Nov 2024 11:25:18 +0000
Subject: [PATCH 2/7] Delete add-another module

This has been moved to `govuk_publishing_components` so no longer needs to be defined in Whitehall.
---
 .../javascripts/admin/modules/add-another.js  | 192 ------------------
 app/assets/javascripts/application.js         |   2 +-
 .../stylesheets/admin/views/_add-another.scss |  12 --
 .../stylesheets/admin/views/_contacts.scss    |   5 -
 app/assets/stylesheets/application.scss       |   1 -
 .../admin/modules/add-another.spec.js         | 159 ---------------
 6 files changed, 1 insertion(+), 370 deletions(-)
 delete mode 100644 app/assets/javascripts/admin/modules/add-another.js
 delete mode 100644 app/assets/stylesheets/admin/views/_add-another.scss
 delete mode 100644 spec/javascripts/admin/modules/add-another.spec.js

diff --git a/app/assets/javascripts/admin/modules/add-another.js b/app/assets/javascripts/admin/modules/add-another.js
deleted file mode 100644
index c161e6f374c..00000000000
--- a/app/assets/javascripts/admin/modules/add-another.js
+++ /dev/null
@@ -1,192 +0,0 @@
-'use strict'
-window.GOVUK = window.GOVUK || {}
-window.GOVUK.Modules = window.GOVUK.Modules || {}
-;(function (Modules) {
-  function AddAnother(module) {
-    this.module = module
-    this.addText = this.module.dataset.addText || 'Add another'
-  }
-
-  AddAnother.prototype.init = function () {
-    this.addButton()
-    this.removeButton()
-  }
-
-  AddAnother.prototype.addButton = function () {
-    const buttonAdd = document.createElement('button')
-
-    buttonAdd.classList.add(
-      'govuk-button',
-      'govuk-!-margin-bottom-0',
-      'govuk-button--secondary',
-      'add-another__add-button'
-    )
-    buttonAdd.setAttribute('type', 'submit')
-    buttonAdd.textContent = this.addText
-
-    this.module.append(buttonAdd)
-
-    // Add event listeners for "add" and "remove" buttons
-    this.module.addEventListener(
-      'click',
-      function (e) {
-        if (e.target.classList.contains('add-another__remove-button')) {
-          this.removeFields(e.target)
-        } else if (e.target.classList.contains('add-another__add-button')) {
-          e.preventDefault()
-          this.addFields(e.target)
-        }
-      }.bind(this)
-    )
-  }
-
-  AddAnother.prototype.addFields = function (button) {
-    const allFields = button.parentNode.querySelectorAll(
-      '.js-duplicate-fields-set'
-    )
-    const fields = allFields[allFields.length - 1]
-
-    // Show hidden "Remove" button
-    if (fields.querySelector('.add-another__remove-button')) {
-      fields.querySelector('.add-another__remove-button').style.display =
-        'inline-block'
-    }
-
-    // Clone the markup of the previous set of fields
-    const newFields = fields.cloneNode(true)
-
-    // Reset values of cloned fields
-    newFields
-      .querySelectorAll('input, textarea, select')
-      .forEach(function (element) {
-        element.value = ''
-      })
-
-    // Increment values for id, for and name of cloned fields
-    this.setValues(newFields, null)
-
-    // Add cloned fields to the DOM
-    button.before(newFields)
-
-    // Add remove button to all fields
-    this.removeButton()
-
-    // Move focus to first visible field in new set
-    newFields
-      .querySelectorAll('input:not([type="hidden"]), select, textarea')[0]
-      .focus()
-  }
-
-  AddAnother.prototype.removeButton = function () {
-    const fields = this.module.querySelectorAll('.js-duplicate-fields-set')
-    let buttonRemove
-
-    if (fields.length > 1) {
-      fields.forEach(function (field) {
-        if (!field.querySelector('.add-another__remove-button')) {
-          buttonRemove = document.createElement('button')
-          buttonRemove.classList.add(
-            'govuk-button',
-            'govuk-button--warning',
-            'govuk-!-margin-bottom-6',
-            'add-another__remove-button'
-          )
-          buttonRemove.setAttribute('type', 'button')
-          buttonRemove.textContent = 'Delete'
-
-          field.append(buttonRemove)
-        }
-      })
-    }
-  }
-
-  AddAnother.prototype.removeFields = function (button) {
-    const set = button.parentNode
-    const input = set.querySelectorAll(
-      'input:not([type="hidden"]), select, textarea'
-    )[0]
-    const baseId = input.id
-    const baseName = input.name
-
-    set.remove()
-
-    const sets = this.module.querySelectorAll('.js-duplicate-fields-set')
-
-    // Add hidden field for removed set
-    const hiddenField = document.createElement('input')
-    hiddenField.type = 'hidden'
-    hiddenField.classList.add('js-hidden-destroy')
-    hiddenField.id = baseId.replace(/_[a-zA-Z]+$/, '__destroy')
-    hiddenField.name = baseName.replace(/\[[_a-zA-Z]+\]$/, '[_destroy]')
-    hiddenField.setAttribute('value', 'true')
-    this.module.append(hiddenField)
-
-    // Hide "Remove" button if only first set displayed
-    if (sets.length === 1) {
-      sets[0].querySelector('.add-another__remove-button').style.display =
-        'none'
-    }
-
-    // Move focus to first visible field
-    sets[0]
-      .querySelectorAll('input:not([type="hidden"]), select, textarea')[0]
-      .focus()
-  }
-
-  // Set values for index, for and name of supplied fields
-  AddAnother.prototype.setValues = function (set, index) {
-    let num = 0
-
-    set
-      .querySelectorAll('label, input, select, textarea')
-      .forEach(function (element) {
-        const currentName = element.getAttribute('name') || null
-        const currentId = element.getAttribute('id') || null
-        const currentFor = element.getAttribute('for') || null
-        const arrayMatcher = /(.*)\[([0-9]+)\](.*?)$/
-        const underscoreMatcher = /(.*)_([0-9]+)_(.*?)$/
-        let matched
-
-        if (currentName && arrayMatcher.exec(currentName)) {
-          matched = arrayMatcher.exec(currentName)
-
-          if (index === null) {
-            num = parseInt(matched[2], 10) + 1
-          } else {
-            num = index
-          }
-
-          element.setAttribute(
-            'name',
-            matched[1] + '[' + num + ']' + matched[3]
-          )
-        }
-
-        if (currentId && underscoreMatcher.exec(currentId)) {
-          matched = underscoreMatcher.exec(currentId)
-
-          if (index === null) {
-            num = parseInt(matched[2], 10) + 1
-          } else {
-            num = index
-          }
-
-          element.setAttribute('id', matched[1] + '_' + num + '_' + matched[3])
-        }
-
-        if (currentFor && underscoreMatcher.exec(currentFor)) {
-          matched = underscoreMatcher.exec(currentFor)
-
-          if (index === null) {
-            num = parseInt(matched[2], 10) + 1
-          } else {
-            num = index
-          }
-
-          element.setAttribute('for', matched[1] + '_' + num + '_' + matched[3])
-        }
-      })
-  }
-
-  Modules.AddAnother = AddAnother
-})(window.GOVUK.Modules)
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 151cffed3b0..b578ec86dea 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -3,6 +3,7 @@
 //= require govuk_publishing_components/dependencies
 //= require govuk_publishing_components/analytics-ga4
 //= require govuk_publishing_components/components/accordion
+//= require govuk_publishing_components/components/add-another
 //= require govuk_publishing_components/components/copy-to-clipboard
 //= require govuk_publishing_components/components/govspeak
 //= require govuk_publishing_components/components/reorderable-list
@@ -23,7 +24,6 @@
 //= require admin/analytics-modules/ga4-page-view-tracking.js
 //= require admin/analytics-modules/ga4-paste-tracker.js
 
-//= require admin/modules/add-another
 //= require admin/modules/document-history-paginator
 //= require admin/modules/locale-switcher
 //= require admin/modules/navbar-toggle
diff --git a/app/assets/stylesheets/admin/views/_add-another.scss b/app/assets/stylesheets/admin/views/_add-another.scss
deleted file mode 100644
index f8b2ce948b4..00000000000
--- a/app/assets/stylesheets/admin/views/_add-another.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.js-duplicate-fields-set {
-  margin-top: govuk-spacing(4);
-  border-bottom: 1px solid $govuk-border-colour;
-
-  &:last-of-type {
-    border-bottom: none;
-  }
-
-  &:first-child {
-    margin-top: 0;
-  }
-}
diff --git a/app/assets/stylesheets/admin/views/_contacts.scss b/app/assets/stylesheets/admin/views/_contacts.scss
index 16abec3c720..c834c850b32 100644
--- a/app/assets/stylesheets/admin/views/_contacts.scss
+++ b/app/assets/stylesheets/admin/views/_contacts.scss
@@ -13,10 +13,5 @@
     .govuk-form-group {
       margin-bottom: govuk-spacing(4);
     }
-
-    .add-another__remove-button {
-      margin-top: govuk-spacing(4);
-      margin-bottom: 0;
-    }
   }
 }
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 068bce7c472..bc881f2bfcd 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -19,7 +19,6 @@ $govuk-page-width: 1140px;
 
 @import "./admin/views/components/worldwide_offices/index/office-summary-card-component";
 
-@import "./admin/views/add-another";
 @import "./admin/views/audit-trail";
 @import "./admin/views/contacts";
 @import "./admin/views/dashboard-index";
diff --git a/spec/javascripts/admin/modules/add-another.spec.js b/spec/javascripts/admin/modules/add-another.spec.js
deleted file mode 100644
index 63e8356a409..00000000000
--- a/spec/javascripts/admin/modules/add-another.spec.js
+++ /dev/null
@@ -1,159 +0,0 @@
-describe('GOVUK.Modules.AddAnother', function () {
-  let fixture, addAnother, addButton, removeButton, fields, field0, field1
-
-  beforeEach(function () {
-    fixture = document.createElement('div')
-    fixture.setAttribute('data-module', 'AddAnother')
-    fixture.setAttribute('data-add-text', 'Add another thing')
-    fixture.innerHTML = `
-      <div class="js-duplicate-fields-set">
-        <input type="hidden" name="a[b][0][c]" value="abc"></input>
-        <label for="d_e_0_f"></label>
-        <input type="text" id="d_e_0_f" name="d[e][0][f]" value="def"></input>
-        <label for="g_h_0_i"></label>
-        <textarea id="g_h_0_i" name="g[h][0][i]">ghi</textarea>
-      </div>
-    `
-
-    document.body.append(fixture)
-
-    addAnother = new GOVUK.Modules.AddAnother(fixture)
-    addAnother.init()
-
-    addButton = document.querySelector('.add-another__add-button')
-  })
-
-  afterEach(function () {
-    fixture.innerHTML = ''
-  })
-
-  it('should add an "Add" button to the container when the component is initialised', function () {
-    expect(addButton).toBeTruthy()
-    expect(addButton.textContent).toBe('Add another thing')
-  })
-
-  it('should add new fields with the correct values when the "Add" button is clicked', function () {
-    window.GOVUK.triggerEvent(addButton, 'click')
-
-    field0 = document.querySelectorAll('.js-duplicate-fields-set')[0]
-    field1 = document.querySelectorAll('.js-duplicate-fields-set')[1]
-
-    expect(document.querySelectorAll('.js-duplicate-fields-set').length).toBe(2)
-    expect(field0.querySelector('input[type="hidden"]').value).toBe('abc')
-    expect(field1.querySelector('input[type="hidden"]').value).toBe('')
-    expect(field0.querySelector('input[type="text"]').value).toBe('def')
-    expect(field1.querySelector('input[type="text"]').value).toBe('')
-    expect(field0.querySelector('textarea').value).toBe('ghi')
-    expect(field1.querySelector('textarea').value).toBe('')
-  })
-
-  it('should move focus to the first relevant field in the new set when the "Add" button is clicked', function () {
-    window.GOVUK.triggerEvent(addButton, 'click')
-
-    expect(document.activeElement).toBe(
-      document.querySelector('input[name="d[e][1][f]"]')
-    )
-  })
-
-  it('should increment the id/name/for values of the added fields', function () {
-    window.GOVUK.triggerEvent(addButton, 'click')
-
-    field0 = document.querySelectorAll('.js-duplicate-fields-set')[0]
-    field1 = document.querySelectorAll('.js-duplicate-fields-set')[1]
-
-    expect(
-      field0.querySelector('input[type="hidden"]').getAttribute('name')
-    ).toBe('a[b][0][c]')
-    expect(
-      field1.querySelector('input[type="hidden"]').getAttribute('name')
-    ).toBe('a[b][1][c]')
-    expect(field0.querySelectorAll('label')[0].getAttribute('for')).toBe(
-      'd_e_0_f'
-    )
-    expect(field1.querySelectorAll('label')[0].getAttribute('for')).toBe(
-      'd_e_1_f'
-    )
-    expect(field0.querySelector('input[type="text"]').getAttribute('id')).toBe(
-      'd_e_0_f'
-    )
-    expect(field1.querySelector('input[type="text"]').getAttribute('id')).toBe(
-      'd_e_1_f'
-    )
-    expect(
-      field0.querySelector('input[type="text"]').getAttribute('name')
-    ).toBe('d[e][0][f]')
-    expect(
-      field1.querySelector('input[type="text"]').getAttribute('name')
-    ).toBe('d[e][1][f]')
-    expect(field0.querySelectorAll('label')[1].getAttribute('for')).toBe(
-      'g_h_0_i'
-    )
-    expect(field1.querySelectorAll('label')[1].getAttribute('for')).toBe(
-      'g_h_1_i'
-    )
-    expect(field0.querySelector('textarea').getAttribute('id')).toBe('g_h_0_i')
-    expect(field1.querySelector('textarea').getAttribute('id')).toBe('g_h_1_i')
-    expect(field0.querySelector('textarea').getAttribute('name')).toBe(
-      'g[h][0][i]'
-    )
-    expect(field1.querySelector('textarea').getAttribute('name')).toBe(
-      'g[h][1][i]'
-    )
-  })
-
-  it('should add a "Remove" button to each set of fields when new fields are created', function () {
-    window.GOVUK.triggerEvent(addButton, 'click')
-
-    field0 = document.querySelectorAll('.js-duplicate-fields-set')[0]
-    field1 = document.querySelectorAll('.js-duplicate-fields-set')[1]
-
-    expect(field0.querySelector('.add-another__remove-button')).toBeTruthy()
-    expect(field1.querySelector('.add-another__remove-button')).toBeTruthy()
-  })
-
-  it('should add a hidden input field with the appropriate attributes for each removed set when the "Remove" button is clicked', function () {
-    window.GOVUK.triggerEvent(addButton, 'click')
-    window.GOVUK.triggerEvent(addButton, 'click')
-
-    removeButton = document.querySelectorAll('.add-another__remove-button')[0]
-
-    window.GOVUK.triggerEvent(removeButton, 'click')
-
-    const hiddenField = document.querySelector('.js-hidden-destroy') || null
-
-    expect(hiddenField).toBeTruthy()
-    expect(hiddenField.id).toBe('d_e_0__destroy')
-    expect(hiddenField.name).toBe('d[e][0][_destroy]')
-    expect(hiddenField.value).toBe('true')
-  })
-
-  it('should remove the appropriate field when the "Remove" button is clicked', function () {
-    window.GOVUK.triggerEvent(addButton, 'click')
-
-    fields = document.querySelectorAll('.js-duplicate-fields-set')
-    removeButton = fields[0].querySelector('.add-another__remove-button')
-
-    window.GOVUK.triggerEvent(removeButton, 'click')
-
-    field0 = document.querySelectorAll('.js-duplicate-fields-set')[0]
-    field1 = document.querySelectorAll('.js-duplicate-fields-set')[1]
-
-    expect(document.querySelectorAll('.js-duplicate-fields-set').length).toBe(1)
-    expect(field0).toBeTruthy()
-    expect(field1).toBeFalsy()
-  })
-
-  // This test is not working since removing the resetting of values on remove
-  // Consider if it's actually required
-  it('should move focus to the first field when any "Remove" button is clicked', function () {
-    window.GOVUK.triggerEvent(addButton, 'click')
-    window.GOVUK.triggerEvent(addButton, 'click')
-    removeButton = document.querySelectorAll('.add-another__remove-button')[0]
-
-    window.GOVUK.triggerEvent(removeButton, 'click')
-
-    expect(document.activeElement).toBe(
-      document.querySelector('input[name="d[e][1][f]"]')
-    )
-  })
-})

From 37b360a45f509e5a06f86c2942e748beb5db6a4f Mon Sep 17 00:00:00 2001
From: Daniel Karaj <daniel.karaj@digital.cabinet-office.gov.uk>
Date: Fri, 22 Nov 2024 11:26:19 +0000
Subject: [PATCH 3/7] Migrate contact numbers to new add-another

Call the new publishing components add another template for contact numbers
---
 .../stylesheets/admin/views/_contacts.scss    | 17 ---------
 app/assets/stylesheets/application.scss       |  1 -
 .../contacts/_contact_number_fields.html.erb  | 21 +++++++++++
 .../admin/contacts/_form_fields.html.erb      | 36 ++++++-------------
 features/support/contact_helper.rb            | 18 ++++++----
 5 files changed, 44 insertions(+), 49 deletions(-)
 delete mode 100644 app/assets/stylesheets/admin/views/_contacts.scss
 create mode 100644 app/views/admin/contacts/_contact_number_fields.html.erb

diff --git a/app/assets/stylesheets/admin/views/_contacts.scss b/app/assets/stylesheets/admin/views/_contacts.scss
deleted file mode 100644
index c834c850b32..00000000000
--- a/app/assets/stylesheets/admin/views/_contacts.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.app-view-contacts {
-  &__address {
-    .govuk-fieldset__legend--l {
-      margin-bottom: govuk-spacing(2);
-    }
-  }
-
-  &__phone {
-    .govuk-fieldset__legend--l {
-      margin-bottom: govuk-spacing(2);
-    }
-
-    .govuk-form-group {
-      margin-bottom: govuk-spacing(4);
-    }
-  }
-}
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index bc881f2bfcd..15a3d953592 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -20,7 +20,6 @@ $govuk-page-width: 1140px;
 @import "./admin/views/components/worldwide_offices/index/office-summary-card-component";
 
 @import "./admin/views/audit-trail";
-@import "./admin/views/contacts";
 @import "./admin/views/dashboard-index";
 @import "./admin/views/document-history-tab";
 @import "./admin/views/document-collection-group-memberships-index";
diff --git a/app/views/admin/contacts/_contact_number_fields.html.erb b/app/views/admin/contacts/_contact_number_fields.html.erb
new file mode 100644
index 00000000000..0492782d558
--- /dev/null
+++ b/app/views/admin/contacts/_contact_number_fields.html.erb
@@ -0,0 +1,21 @@
+<%= contact_form.fields_for :contact_numbers, contact_number do |contact_number_form| %>
+  <%= render "govuk_publishing_components/components/input", {
+    label: {
+      text: "Label",
+    },
+    name: "#{name}[contact_numbers_attributes][#{index}][label]",
+    id: "#{id}_contact_numbers_attributes_#{index}_label",
+    heading_size: "s",
+    value: contact_number_form.object.label,
+  } %>
+
+  <%= render "govuk_publishing_components/components/input", {
+    label: {
+      text: "Number",
+    },
+    name: "#{name}[contact_numbers_attributes][#{index}][number]",
+    id: "#{id}_contact_numbers_attributes_#{index}_number",
+    heading_size: "s",
+    value: contact_number_form.object.number,
+  } %>
+<% end %>
diff --git a/app/views/admin/contacts/_form_fields.html.erb b/app/views/admin/contacts/_form_fields.html.erb
index 97470ab1187..76eb94c69d4 100644
--- a/app/views/admin/contacts/_form_fields.html.erb
+++ b/app/views/admin/contacts/_form_fields.html.erb
@@ -101,30 +101,16 @@
     heading_level: 2,
     heading_size: "l",
   } do %>
-    <div data-module="AddAnother" data-add-text="Add phone number">
-      <%= contact_form.fields_for :contact_numbers, contact_form.object.contact_numbers do |contact_number_form| %>
-        <div class=" js-duplicate-fields-set govuk-!-margin-bottom-4">
-          <%= render "govuk_publishing_components/components/input", {
-            label: {
-              text: "Label",
-            },
-            name: "#{name}[contact_numbers_attributes][#{contact_number_form.index}][label]",
-            id: "#{id}_contact_numbers_attributes_#{contact_number_form.index}_label",
-            heading_size: "m",
-            value: contact_number_form.object.label,
-          } %>
-
-          <%= render "govuk_publishing_components/components/input", {
-            label: {
-              text: "Number",
-            },
-            name: "#{name}[contact_numbers_attributes][#{contact_number_form.index}][number]",
-            id: "#{id}_contact_numbers_attributes_#{contact_number_form.index}_number",
-            heading_size: "m",
-            value: contact_number_form.object.number,
-          } %>
-        </div>
-      <% end %>
-    </div>
+    <%= render "govuk_publishing_components/components/add_another", {
+      fieldset_legend: "Phone number",
+      add_button_text: "Add phone number",
+      items: contact_form.object.contact_numbers.each_with_index.map do  |contact_number, index|
+        {
+          fields: render(partial: "admin/contacts/contact_number_fields", locals: { contact_form:, contact_number:, index:, name:, id: }),
+          destroy_checkbox: render("govuk_publishing_components/components/checkboxes", { name: "#{name}[contact_numbers_attributes][#{index}][_destroy]", items: [{label: "Delete", value: "1" }]}),
+        }
+      end,
+      empty: render(partial: "admin/contacts/contact_number_fields", locals: { contact_form:, contact_number: ContactNumber.new, index: contact_form.object.contact_numbers.length, name:, id: }),
+    } %>
   <% end %>
 </div>
diff --git a/features/support/contact_helper.rb b/features/support/contact_helper.rb
index 9777c7e467b..0ad847a5a12 100644
--- a/features/support/contact_helper.rb
+++ b/features/support/contact_helper.rb
@@ -15,8 +15,10 @@ def fill_in_contact_details(contact_details = {})
     fill_in "Street address", with: contact_details[:street_address]
     fill_in "Postal code", with: contact_details[:postal_code]
     fill_in "Email", with: contact_details[:email]
-    fill_in "Label", with: contact_details[:phone_number_label]
-    fill_in "Number", with: contact_details[:phone_number]
+    within ".js-add-another__fieldset", match: :first do
+      fill_in "Label", with: contact_details[:phone_number_label]
+      fill_in "Number", with: contact_details[:phone_number]
+    end
     select contact_details[:country], from: "Country"
     # allow passing in nil to say - don't try to choose the feature on
     # home page? setting; maybe because it's the first office for a world
@@ -41,8 +43,10 @@ def fill_in_contact_details_for_organisation(contact_details = {})
     fill_in "Street address", with: contact_details[:street_address]
     fill_in "Postal code", with: contact_details[:postal_code]
     fill_in "Email", with: contact_details[:email]
-    fill_in "Label", with: contact_details[:phone_number_label]
-    fill_in "Number", with: contact_details[:phone_number]
+    within ".js-add-another__fieldset", match: :first do
+      fill_in "Label", with: contact_details[:phone_number_label]
+      fill_in "Number", with: contact_details[:phone_number]
+    end
     select contact_details[:country], from: "Country"
     # allow passing in nil to say - don't try to choose the feature on
     # home page? setting; maybe because it's the first office for a world
@@ -67,8 +71,10 @@ def legacy_fill_in_contact_details(contact_details = {})
     fill_in "Street address", with: contact_details[:street_address]
     fill_in "Postal code", with: contact_details[:postal_code]
     fill_in "Email", with: contact_details[:email]
-    fill_in "Label", with: contact_details[:phone_number_label]
-    fill_in "Number", with: contact_details[:phone_number]
+    within ".js-add-another__fieldset", match: :first do
+      fill_in "Label", with: contact_details[:phone_number_label]
+      fill_in "Number", with: contact_details[:phone_number]
+    end
     select contact_details[:country], from: "Country"
     # allow passing in nil to say - don't try to choose the feature on
     # home page? setting; maybe because it's the first office for a world

From 5e59849a06e53e0415c2dbf45abdb367e2833029 Mon Sep 17 00:00:00 2001
From: Daniel Karaj <daniel.karaj@digital.cabinet-office.gov.uk>
Date: Fri, 22 Nov 2024 11:38:40 +0000
Subject: [PATCH 4/7] Migrate casualties to new add-another

Call the new publishing components add another template for casualties
---
 .../_casualty_fields.html.erb                 | 12 +++++++++
 .../admin/fatality_notices/_form.html.erb     | 27 ++++++++-----------
 2 files changed, 23 insertions(+), 16 deletions(-)
 create mode 100644 app/views/admin/fatality_notices/_casualty_fields.html.erb

diff --git a/app/views/admin/fatality_notices/_casualty_fields.html.erb b/app/views/admin/fatality_notices/_casualty_fields.html.erb
new file mode 100644
index 00000000000..9758ff073f1
--- /dev/null
+++ b/app/views/admin/fatality_notices/_casualty_fields.html.erb
@@ -0,0 +1,12 @@
+<%= form.fields_for :fatality_notice_casualties, casualty do |fatality_form| %>
+  <%= render "govuk_publishing_components/components/textarea", {
+    label: {
+      text: "Personal details",
+      bold: true,
+    },
+    value: fatality_form.object.personal_details,
+    name: "edition[fatality_notice_casualties_attributes][#{index}][personal_details]",
+    id: "edition_fatality_notice_casualties_#{index}_personal_details",
+    rows: 2,
+  } %>
+<% end %>
diff --git a/app/views/admin/fatality_notices/_form.html.erb b/app/views/admin/fatality_notices/_form.html.erb
index 87b0fe8dbfb..f5793e126f5 100644
--- a/app/views/admin/fatality_notices/_form.html.erb
+++ b/app/views/admin/fatality_notices/_form.html.erb
@@ -34,21 +34,16 @@
 
     <h4 class="govuk-heading-m">Casualties (required)</h4>
 
-    <div data-module="AddAnother" data-add-text="Add another person" class="govuk-!-margin-bottom-4">
-      <%= form.fields_for :fatality_notice_casualties do |fatality_form| %>
-        <div class="js-duplicate-fields-set govuk-!-margin-top-4">
-          <%= render "govuk_publishing_components/components/textarea", {
-            label: {
-              text: "Personal details",
-              bold: true,
-            },
-            value: fatality_form.object.personal_details,
-            name: "edition[fatality_notice_casualties_attributes][#{fatality_form.index}][personal_details]",
-            id: "edition_fatality_notice_casualties_#{fatality_form.index}_personal_details",
-            rows: 2,
-          } %>
-        </div>
-      <% end %>
-    </div>
+    <%= render "govuk_publishing_components/components/add_another", {
+      fieldset_legend: "Person",
+      add_button_text: "Add another person",
+      items: form.object.fatality_notice_casualties.each_with_index.map do  |casualty, index|
+        {
+          fields: render(partial: "admin/fatality_notices/casualty_fields", locals: { form:, casualty:, index: }),
+          destroy_checkbox: render("govuk_publishing_components/components/checkboxes", { name: "edition[fatality_notice_casualties_attributes][#{index}][_destroy]", items: [{label: "Delete", value: "1" }]}),
+        }
+      end,
+      empty: render(partial: "admin/fatality_notices/casualty_fields", locals: { form:, casualty: FatalityNoticeCasualty.new, index: form.object.fatality_notice_casualties.length }),
+    } %>
   <% end %>
 <% end %>

From 2fce90ea799d3e1af6c0ccd9de1106dde93a61fb Mon Sep 17 00:00:00 2001
From: Daniel Karaj <daniel.karaj@digital.cabinet-office.gov.uk>
Date: Fri, 22 Nov 2024 11:53:54 +0000
Subject: [PATCH 5/7] Migrate social media accounts to new add-another

Call the new publishing components add another template for social media accounts
---
 app/views/admin/topical_events/_form.html.erb | 46 +++++--------------
 .../_social_media_account_fields.html.erb     | 27 +++++++++++
 2 files changed, 38 insertions(+), 35 deletions(-)
 create mode 100644 app/views/admin/topical_events/_social_media_account_fields.html.erb

diff --git a/app/views/admin/topical_events/_form.html.erb b/app/views/admin/topical_events/_form.html.erb
index 93d0debd87d..d1004eeda74 100644
--- a/app/views/admin/topical_events/_form.html.erb
+++ b/app/views/admin/topical_events/_form.html.erb
@@ -137,41 +137,17 @@
     legend_text: "Social media accounts",
     heading_size: "l",
   } do %>
-    <div data-module="AddAnother" data-add-text="Add account" class="govuk-!-margin-bottom-4">
-      <%= form.fields_for :social_media_accounts do |social_media_form| %>
-        <div class="js-duplicate-fields-set">
-          <div class="govuk-!-margin-bottom-6">
-            <div class="govuk-!-margin-bottom-4">
-              <%= render "govuk_publishing_components/components/select", {
-                id: "topical_event_social_media_accounts_attributes_#{social_media_form.index}_social_media_service_id",
-                label: "Service (required)",
-                name: "topical_event[social_media_accounts_attributes][#{social_media_form.index}][social_media_service_id]",
-                heading_size: "m",
-                options: [{ text: "", value: "" }] +
-                  SocialMediaService.all.map do |social_media|
-                    {
-                      text: social_media.name,
-                      value: social_media.id,
-                      selected: social_media_form.object.social_media_service_id == social_media.id,
-                    }
-                  end,
-                full_width: true,
-              } %>
-            </div>
-            <%= render "govuk_publishing_components/components/input", {
-              label: {
-                text: "URL (required)",
-              },
-              name: "topical_event[social_media_accounts_attributes][#{social_media_form.index}][url]",
-              id: "topical_event_social_media_accounts_attributes_#{social_media_form.index}_url",
-              value: social_media_form.object.url,
-              heading_size: "m",
-              error_items: errors_for(social_media_form.object.errors, :url),
-            } %>
-          </div>
-        </div>
-      <% end %>
-    </div>
+    <%= render "govuk_publishing_components/components/add_another", {
+      fieldset_legend: "Account",
+      add_button_text: "Add account",
+      items: form.object.social_media_accounts.each_with_index.map do  |social_media_account, index|
+        {
+          fields: render(partial: "admin/topical_events/social_media_account_fields", locals: { form:, social_media_account:, index: }),
+          destroy_checkbox: render("govuk_publishing_components/components/checkboxes", { name: "topical_event[social_media_accounts_attributes][#{index}][_destroy]", items: [{label: "Delete", value: "1" }]}),
+        }
+      end,
+      empty: render(partial: "admin/topical_events/social_media_account_fields", locals: { form:, social_media_account: SocialMediaAccount.new, index: form.object.social_media_accounts.length }),
+    } %>
   <% end %>
 
   <div class="govuk-button-group govuk-!-margin-top-8">
diff --git a/app/views/admin/topical_events/_social_media_account_fields.html.erb b/app/views/admin/topical_events/_social_media_account_fields.html.erb
new file mode 100644
index 00000000000..ec285fcb628
--- /dev/null
+++ b/app/views/admin/topical_events/_social_media_account_fields.html.erb
@@ -0,0 +1,27 @@
+<%= form.fields_for :social_media_accounts, social_media_account do |social_media_form| %>
+  <%= render "govuk_publishing_components/components/select", {
+    id: "topical_event_social_media_accounts_attributes_#{index}_social_media_service_id",
+    label: "Service (required)",
+    name: "topical_event[social_media_accounts_attributes][#{index}][social_media_service_id]",
+    heading_size: "s",
+    options: [{ text: "", value: "" }] +
+      SocialMediaService.all.map do |social_media|
+        {
+          text: social_media.name,
+          value: social_media.id,
+          selected: social_media_form.object.social_media_service_id == social_media.id,
+        }
+      end,
+    full_width: true,
+  } %>
+  <%= render "govuk_publishing_components/components/input", {
+    label: {
+      text: "URL (required)",
+    },
+    name: "topical_event[social_media_accounts_attributes][#{index}][url]",
+    id: "topical_event_social_media_accounts_attributes_#{index}_url",
+    value: social_media_form.object.url,
+    heading_size: "s",
+    error_items: errors_for(social_media_form.object.errors, :url),
+  } %>
+<% end %>

From 3fa0bf3368b224edce6c4116f1e732b795ab5d14 Mon Sep 17 00:00:00 2001
From: Daniel Karaj <daniel.karaj@digital.cabinet-office.gov.uk>
Date: Fri, 22 Nov 2024 12:41:40 +0000
Subject: [PATCH 6/7] Migrate featured links to new add-another

Call the new publishing components add another template for featured links
---
 .../organisation_translations/edit.html.erb   |   2 +-
 app/views/admin/organisations/_form.html.erb  |   2 +-
 .../shared/_featured_link_fields.html.erb     | 124 +++++++-----------
 .../shared/_featured_links_fields.html.erb    |  31 +++++
 .../admin/world_location_news/edit.html.erb   |   2 +-
 .../step_definitions/organisation_steps.rb    |  14 +-
 6 files changed, 92 insertions(+), 83 deletions(-)
 create mode 100644 app/views/admin/shared/_featured_links_fields.html.erb

diff --git a/app/views/admin/organisation_translations/edit.html.erb b/app/views/admin/organisation_translations/edit.html.erb
index 91f8cf325c1..62dff781bb2 100644
--- a/app/views/admin/organisation_translations/edit.html.erb
+++ b/app/views/admin/organisation_translations/edit.html.erb
@@ -60,7 +60,7 @@
         },
       } %>
 
-      <%= render "admin/shared/featured_link_fields", form: form %>
+      <%= render "admin/shared/featured_links_fields", form: form %>
 
       <div class="govuk-button-group govuk-!-margin-top-8">
         <%= render "govuk_publishing_components/components/button", {
diff --git a/app/views/admin/organisations/_form.html.erb b/app/views/admin/organisations/_form.html.erb
index a6f545ff8dd..2170c9474ab 100644
--- a/app/views/admin/organisations/_form.html.erb
+++ b/app/views/admin/organisations/_form.html.erb
@@ -314,7 +314,7 @@
         margin_bottom: 3,
       } %>
 
-      <%= render "admin/shared/featured_link_fields", form: form, remove_banner: true %>
+      <%= render "admin/shared/featured_links_fields", form: form, remove_banner: true %>
     </div>
   <% end %>
 
diff --git a/app/views/admin/shared/_featured_link_fields.html.erb b/app/views/admin/shared/_featured_link_fields.html.erb
index 7fbcfde4c7f..eff7d0724cc 100644
--- a/app/views/admin/shared/_featured_link_fields.html.erb
+++ b/app/views/admin/shared/_featured_link_fields.html.erb
@@ -1,77 +1,53 @@
-<%
-  featured_links = form.object.featured_links
-  featured_links = [LocalisedModel.new(FeaturedLink.new, I18n.default_locale)] unless featured_links.any?
-  model = form.object.model_name.singular
+<%= form.fields_for :featured_links, featured_link do |featured_link_form| %>
+  <% if @translation_locale && @translation_locale.code != I18n.default_locale %>
+    <%= render "components/translated_input", {
+      input: {
+        label: {
+          text: "Title",
+        },
+        heading_size: "s",
+        value: featured_link_form.object.title,
+        name: "#{model}[featured_links_attributes][#{index}][title]",
+        id: "#{model}_featured_links[#{index}]_title",
+      },
+      details: {
+        text: featured_link_form.object.title,
+      },
+    } %>
 
-  if form.object.respond_to?(:visible_featured_links_count)
-    visible_links = form.object.visible_featured_links_count
-  else
-    visible_links = FeaturedLink::DEFAULT_SET_SIZE
-  end
+    <%= render "components/translated_input", {
+      input: {
+        label: {
+          text: "URL",
+        },
+        heading_size: "s",
+        value: featured_link_form.object.url,
+        name: "#{model}[featured_links_attributes][#{index}][url]",
+        id: "#{model}_featured_links[#{index}]_url",
+      },
+      details: {
+        text: featured_link_form.object.url,
+      },
+    } %>
+  <% else %>
+    <%= render "govuk_publishing_components/components/input", {
+      label: {
+        text: "Title",
+      },
+      heading_size: "s",
+      value: featured_link_form.object.title,
+      name: "#{model}[featured_links_attributes][#{index}][title]",
+      id: "#{model}_featured_links[#{index}]_title",
+    } %>
 
-  remove_banner ||= false
-%>
-
-<% unless remove_banner %>
-  <%= render "govuk_publishing_components/components/inset_text", {
-    text: "Only the first #{visible_links} links will be shown on the public site.",
-  } %>
-<% end %>
-
-<div data-module="AddAnother" data-add-text="Add another featured link">
-  <%= form.fields_for :featured_links do |featured_link_form| %>
-    <div class="js-duplicate-fields-set govuk-!-margin-bottom-6">
-      <% if @translation_locale && @translation_locale.code != I18n.default_locale %>
-        <%= render "components/translated_input", {
-          input: {
-            label: {
-              text: "Title",
-            },
-            heading_size: "m",
-            value: featured_link_form.object.title,
-            name: "#{model}[featured_links_attributes][#{featured_link_form.index}][title]",
-            id: "#{model}_featured_links[#{featured_link_form.index}]_title",
-          },
-          details: {
-            text: featured_link_form.object.title,
-          },
-        } %>
-
-        <%= render "components/translated_input", {
-          input: {
-            label: {
-              text: "URL",
-            },
-            heading_size: "m",
-            value: featured_link_form.object.url,
-            name: "#{model}[featured_links_attributes][#{featured_link_form.index}][url]",
-            id: "#{model}_featured_links[#{featured_link_form.index}]_url",
-          },
-          details: {
-            text: featured_link_form.object.url,
-          },
-        } %>
-      <% else %>
-        <%= render "govuk_publishing_components/components/input", {
-          label: {
-            text: "Title",
-          },
-          heading_size: "m",
-          value: featured_link_form.object.title,
-          name: "#{model}[featured_links_attributes][#{featured_link_form.index}][title]",
-          id: "#{model}_featured_links[#{featured_link_form.index}]_title",
-        } %>
-
-        <%= render "govuk_publishing_components/components/input", {
-          label: {
-            text: "URL",
-          },
-          heading_size: "m",
-          value: featured_link_form.object.url,
-          name: "#{model}[featured_links_attributes][#{featured_link_form.index}][url]",
-          id: "#{model}_featured_links[#{featured_link_form.index}]_url",
-        } %>
-      <% end %>
-    </div>
+    <%= render "govuk_publishing_components/components/input", {
+      label: {
+        text: "URL",
+      },
+      heading_size: "s",
+      value: featured_link_form.object.url,
+      name: "#{model}[featured_links_attributes][#{index}][url]",
+      id: "#{model}_featured_links[#{index}]_url",
+    } %>
   <% end %>
-</div>
+<% end %>
diff --git a/app/views/admin/shared/_featured_links_fields.html.erb b/app/views/admin/shared/_featured_links_fields.html.erb
new file mode 100644
index 00000000000..35308f5919f
--- /dev/null
+++ b/app/views/admin/shared/_featured_links_fields.html.erb
@@ -0,0 +1,31 @@
+<%
+  featured_links = form.object.featured_links
+  new_featured_link = LocalisedModel.new(FeaturedLink.new, I18n.default_locale)
+  model = form.object.model_name.singular
+
+  if form.object.respond_to?(:visible_featured_links_count)
+    visible_links = form.object.visible_featured_links_count
+  else
+    visible_links = FeaturedLink::DEFAULT_SET_SIZE
+  end
+
+  remove_banner ||= false
+%>
+
+<% unless remove_banner %>
+  <%= render "govuk_publishing_components/components/inset_text", {
+    text: "Only the first #{visible_links} links will be shown on the public site.",
+  } %>
+<% end %>
+
+<%= render "govuk_publishing_components/components/add_another", {
+  fieldset_legend: "Featured link",
+  add_button_text: "Add another featured link",
+  items: featured_links.each_with_index.map do  |featured_link, index|
+    {
+      fields: render(partial: "admin/shared/featured_link_fields", locals: { form:, featured_link:, index:, model: }),
+      destroy_checkbox: render("govuk_publishing_components/components/checkboxes", { name: "#{model}[featured_links_attributes][#{index}[_destroy]", items: [{label: "Delete", value: "1" }]}),
+    }
+  end,
+  empty: render(partial: "admin/shared/featured_link_fields", locals: { form:, featured_link: new_featured_link, index: featured_links.length, model: }),
+} %>
diff --git a/app/views/admin/world_location_news/edit.html.erb b/app/views/admin/world_location_news/edit.html.erb
index bf221309b44..62fa6b5f592 100644
--- a/app/views/admin/world_location_news/edit.html.erb
+++ b/app/views/admin/world_location_news/edit.html.erb
@@ -71,7 +71,7 @@
           font_size: "l",
         } %>
 
-        <%= render "admin/shared/featured_link_fields", form: form %>
+        <%= render "admin/shared/featured_links_fields", form: form %>
 
         <div class="govuk-button-group govuk-!-margin-top-8">
           <%= render "govuk_publishing_components/components/button", {
diff --git a/features/step_definitions/organisation_steps.rb b/features/step_definitions/organisation_steps.rb
index fa9b3ccce09..a53993deee1 100644
--- a/features/step_definitions/organisation_steps.rb
+++ b/features/step_definitions/organisation_steps.rb
@@ -35,8 +35,8 @@
   fill_in "Logo formatted name", with: organisation_name
   select "Ministerial department", from: "Organisation type"
   select "Jazz Bizniz", from: "organisation_topical_event_ids_0"
-  selector = ".app-view-organisation__featured_links"
-  within selector do
+  selector = ".app-view-organisation__featured_links .js-add-another__fieldset"
+  within selector, match: :first do
     expect(page).to_not have_content("English:")
     fill_in "Title", with: "Top task 1"
     fill_in "URL", with: "http://mainstream.co.uk"
@@ -56,10 +56,12 @@
   fill_in "Name", with: "Organisation Name in another language"
   fill_in "Acronym", with: "ABC"
   fill_in "Logo formatted name", with: "Organisation Name in another language"
-  fill_in "Title", with: "Top task 1 in another language"
-  expect(page).to have_field("organisation_featured_links[0]_title"), with: "Top task 1 in another language"
-  fill_in "URL", with: "http://mainstream.wales"
-  expect(page).to have_field("organisation_featured_links[0]_url"), with: "http://mainstream.co.uk"
+  within ".js-add-another__fieldset", match: :first do
+    fill_in "Title", with: "Top task 1 in another language"
+    expect(page).to have_field("organisation_featured_links[0]_title"), with: "Top task 1 in another language"
+    fill_in "URL", with: "http://mainstream.wales"
+    expect(page).to have_field("organisation_featured_links[0]_url"), with: "http://mainstream.co.uk"
+  end
 
   click_button "Save"
 end

From cdb1f082a8c0ec2823dd662ff569e43135777d86 Mon Sep 17 00:00:00 2001
From: Daniel Karaj <daniel.karaj@digital.cabinet-office.gov.uk>
Date: Thu, 28 Nov 2024 17:01:45 +0000
Subject: [PATCH 7/7] Migrate promotional feature links to new add-another

Call the new publishing components add another template for promotional feature links
---
 .../_form_fields.html.erb                     | 40 +++++--------------
 .../_link_fields.html.erb                     | 23 +++++++++++
 .../promotional_features_steps.rb             | 12 ++++--
 3 files changed, 42 insertions(+), 33 deletions(-)
 create mode 100644 app/views/admin/promotional_feature_items/_link_fields.html.erb

diff --git a/app/views/admin/promotional_feature_items/_form_fields.html.erb b/app/views/admin/promotional_feature_items/_form_fields.html.erb
index f77eaf9e5ad..075a47191f7 100644
--- a/app/views/admin/promotional_feature_items/_form_fields.html.erb
+++ b/app/views/admin/promotional_feature_items/_form_fields.html.erb
@@ -69,33 +69,15 @@
   legend_text: "Feature item links",
   heading_size: "l",
 } do %>
-  <div data-module="AddAnother" data-add-text="Add link" class="govuk-!-margin-bottom-4">
-    <%= form.fields_for :links do |link_form| %>
-      <div class="js-duplicate-fields-set">
-        <div class="govuk-!-margin-bottom-6">
-          <%= render "govuk_publishing_components/components/input", {
-            label: {
-              text: "URL",
-            },
-            name: "#{name}[[links_attributes][#{link_form.index}][url]",
-            id: "#{id}_links_attributes_#{link_form.index}_url",
-            value: link_form.object.url,
-            heading_size: "m",
-            error_items: errors_for(link_form.object.errors, :url),
-          } %>
-
-          <%= render "govuk_publishing_components/components/input", {
-            label: {
-              text: "Text",
-            },
-            name: "#{name}[[links_attributes][#{link_form.index}][text]",
-            id: "#{id}_links_attributes_#{link_form.index}_text",
-            value: link_form.object.text,
-            heading_size: "m",
-            error_items: errors_for(link_form.object.errors, :text),
-          } %>
-        </div>
-      </div>
-    <% end %>
-  </div>
+  <%= render "govuk_publishing_components/components/add_another", {
+    fieldset_legend: "Link",
+    add_button_text: "Add link",
+    items: form.object.links.each_with_index.map do  |link, index|
+      {
+        fields: render(partial: "admin/promotional_feature_items/link_fields", locals: { form:, link:, index:, name:, id: }),
+        destroy_checkbox: render("govuk_publishing_components/components/checkboxes", { name: "#{name}[links_attributes][#{index}][_destroy]", items: [{label: "Delete", value: "1" }]}),
+      }
+    end,
+    empty: render(partial: "admin/promotional_feature_items/link_fields", locals: { form:, link: PromotionalFeatureLink.new, index: form.object.links.length, name:, id: }),
+  } %>
 <% end %>
diff --git a/app/views/admin/promotional_feature_items/_link_fields.html.erb b/app/views/admin/promotional_feature_items/_link_fields.html.erb
new file mode 100644
index 00000000000..ff45e18008b
--- /dev/null
+++ b/app/views/admin/promotional_feature_items/_link_fields.html.erb
@@ -0,0 +1,23 @@
+<%= form.fields_for :links, link do |link_form| %>
+  <%= render "govuk_publishing_components/components/input", {
+    label: {
+      text: "URL",
+    },
+    name: "#{name}[links_attributes][#{index}][url]",
+    id: "#{id}_links_attributes_#{index}_url",
+    value: link_form.object.url,
+    heading_size: "s",
+    error_items: errors_for(link_form.object.errors, :url),
+  } %>
+
+  <%= render "govuk_publishing_components/components/input", {
+    label: {
+      text: "Text",
+    },
+    name: "#{name}[links_attributes][#{index}][text]",
+    id: "#{id}_links_attributes_#{index}_text",
+    value: link_form.object.text,
+    heading_size: "s",
+    error_items: errors_for(link_form.object.errors, :text),
+  } %>
+<% end %>
diff --git a/features/step_definitions/promotional_features_steps.rb b/features/step_definitions/promotional_features_steps.rb
index cc993b74273..54d3a06597a 100644
--- a/features/step_definitions/promotional_features_steps.rb
+++ b/features/step_definitions/promotional_features_steps.rb
@@ -28,8 +28,10 @@
   fill_in "Item title url", with: "http://big-cheese.co"
   attach_file :image, Rails.root.join("test/fixtures/big-cheese.960x640.jpg")
   fill_in "Image description", with: "The Big Cheese"
-  fill_in "URL", with: "http://test.com"
-  fill_in "Text", with: "someText"
+  within ".js-add-another__fieldset", match: :first do
+    fill_in "URL", with: "http://test.com"
+    fill_in "Text", with: "someText"
+  end
 
   click_button "Save"
 end
@@ -47,8 +49,10 @@
   fill_in "YouTube video URL (required)", with: "https://www.youtube.com/watch?v=fFmDQn9Lbl4"
   fill_in "YouTube description (required)", with: "Description of video."
   fill_in "Image description", with: "The Big Cheese"
-  fill_in "URL", with: "http://test.com"
-  fill_in "Text", with: "someText"
+  within ".js-add-another__fieldset", match: :first do
+    fill_in "URL", with: "http://test.com"
+    fill_in "Text", with: "someText"
+  end
 
   click_button "Save"
 end