diff --git a/front_end/src/Apps/Payroll.jsx b/front_end/src/Apps/Payroll.jsx
index 6b6d3906..e7ab31d9 100644
--- a/front_end/src/Apps/Payroll.jsx
+++ b/front_end/src/Apps/Payroll.jsx
@@ -61,8 +61,8 @@ export default function Payroll() {
     }
   }
 
-  function handleTogglePayPeriods(employeeNo, index, enabled) {
-    dispatch({ type: "updatePayPeriods", employeeNo, index, enabled });
+  function handleTogglePayPeriods(id, index, enabled) {
+    dispatch({ type: "updatePayPeriods", id, index, enabled });
   }
 
   function handleToggleVacancyPayPeriods(id, index, enabled) {
@@ -117,54 +117,30 @@ export default function Payroll() {
   );
 }
 
-function payrollReducer(payroll, action) {
+const positionReducer = (data, action) => {
   switch (action.type) {
     case "fetched": {
       return action.data;
     }
     case "updatePayPeriods": {
-      return payroll.map((employeeRow) => {
-        if (employeeRow.employee_no == action.employeeNo) {
-          const updatedPayPeriods = employeeRow.pay_periods.map(
-            (period, index) => {
-              if (index + 1 >= action.index + 1) {
-                return !action.enabled;
-              }
-              return period;
-            }
-          );
-          return {
-            ...employeeRow,
-            pay_periods: updatedPayPeriods,
-          };
-        }
-        return employeeRow;
-      });
-    }
-  }
-}
-
-function vacanciesReducer(vacancies, action) {
-  switch (action.type) {
-    case "fetched": {
-      return action.data;
-    }
-    case "updatePayPeriods": {
-      return vacancies.map((vacancy) => {
-        if (vacancy.id == action.id) {
-          const updatedPayPeriods = vacancy.pay_periods.map((period, index) => {
+      return data.map((row) => {
+        if (row.id == action.id) {
+          const updatedPayPeriods = row.pay_periods.map((period, index) => {
             if (index + 1 >= action.index + 1) {
               return !action.enabled;
             }
             return period;
           });
           return {
-            ...vacancy,
+            ...row,
             pay_periods: updatedPayPeriods,
           };
         }
-        return vacancy;
+        return row;
       });
     }
   }
-}
+};
+
+const payrollReducer = (data, action) => positionReducer(data, action);
+const vacanciesReducer = (data, action) => positionReducer(data, action);
diff --git a/front_end/src/Components/EditPayroll/EmployeeRow/index.jsx b/front_end/src/Components/EditPayroll/EmployeeRow/index.jsx
index 3ef741d0..142220a0 100644
--- a/front_end/src/Components/EditPayroll/EmployeeRow/index.jsx
+++ b/front_end/src/Components/EditPayroll/EmployeeRow/index.jsx
@@ -12,7 +12,7 @@ const EmployeeRow = ({ row, onTogglePayPeriods }) => {
       <td className="govuk-table__cell">{row.assignment_status}</td>
       <PayPeriods
         row={row}
-        id={row.employee_no}
+        id={row.id}
         onTogglePayPeriods={onTogglePayPeriods}
       />
     </tr>
diff --git a/payroll/services/payroll.py b/payroll/services/payroll.py
index 036e5aab..ddb81e90 100644
--- a/payroll/services/payroll.py
+++ b/payroll/services/payroll.py
@@ -114,6 +114,7 @@ def get_payroll_data(
     )
     for obj in qs:
         yield EmployeePayroll(
+            id=obj.pk,
             name=obj.get_full_name(),
             grade=obj.grade.pk,
             employee_no=obj.employee_no,