How to insert same component multiple times i,e create same component multiple instances to show on each iteration using ViewContainerRef angular

Question

I want to know How to insert same component multiple times i,e create same component multiple instances to show on each iteration using ViewContainerRef in angular.

the component is loading fine like shown in below image

but when I click on 2nd row DC order it insert into above row again and not to bottom row. how I can fix this? actually I want same component repeating multiple times and whenever new component is inserted it should not disturb existing components. i.e it show have new independent instance

this is code I am using to create the component

async LoadviewNVerifyMedCompponent(medication) {
let injector = this.shS.CreateInjector({}, this.injector);
const { ViewNVerifyMedComponent, LazViewNVerifyMedModule } = await  import('./components/view-nverify-med.component');
const moduleFactory = await this.shS.LoadModuleFactory(LazViewNVerifyMedModule);
const moduleRef = moduleFactory.create(injector);
const factory = moduleRef.componentFactoryResolver.resolveComponentFactory(ViewNVerifyMedComponent);
const dyynamicComponent = this.viewNVerifyMedElement.createComponent(factory);
let generatedComponent = <ViewNVerifyMedComponent>dyynamicComponent.instance;
generatedComponent.medication = medication;
debugger
generatedComponent.CancelVerify.subscribe(data => {
  
});
generatedComponent.OrderVerified.subscribe(data => {
});

}

I want the component factory to create the multiple instances of same component and then show in each row