Dynamic from fields using reactive forms in Angular?

I have a scenario like Need to edit the single quotes values (only single quotes vlaues),

So I extracted the single quotes values using regix and prepare reactive dynamic form.

onclick of perform edit button will show old step name above, new step name below, submit step will replace the step name in orginal array.

WOrking fine as expected in few scenarios according to my approach, but few in scenarios I realized whateve algorithem I am following that is not fullfill my requirement.

Below are the test cases

Test case 1: Step Name: "Then I should hire an employee using profile '1' for 'USA'", // Here --> '1', 'USA' values are editable

Test case 2: "And Employee should be hired on '01' day of pay period '01' of 'Current' Fiscal" // '01', '01', 'Current'

Issues: in test case 2 if I tried to edit second 01 it is editing the first 01

I try to solve the perform edit function with help of indexof, substring functions

this.replaceString = this.selectedStep.name;
this.metaArray.forEach((element: any) => {
  var metaIndex = this.replaceString.indexOf(element.paramValue);
  if (metaIndex !== -1) {
    const replaceValue = this.stepEditForm.controls[element['paramIndex']].value;
    this.replaceString = this.replaceString.substring(0, metaIndex) + replaceValue + this.replaceString.substring(metaIndex + (element.paramValue.length));
  }
});

but in indexof always find first occurence of value in string. So I realized my approach is wrong on performedit function

please find attachment for code

https://stackblitz.com/edit/angular-reactive-forms-cqb9hy?file=app%2Fapp.component.ts

So Can any one please suggest me how to solve this issue,

Thanks in advance

from Dynamic from fields using reactive forms in Angular?