Styjun

I have an ajaxFormLoop on a list of objects that have some fields.

<div class="col-1-1"
 data-parent-subprovider="parentSubprovider">
 <div t:type="ajaxformloop" t:id="subproviderLoop"
 t:source="entity.contractSubprovider.subproviderList"
 t:element="entity.contractSubprovider"
 t:value="subprovider" t:encoder="subproviderLoopEncoder">
 <div class="col-3-4">
 <t:subproviderEdit
 t:subprovider="subprovider" />
 </div>
 <div class="col-1-4">
 <t:removerowlink class="btn btn--outline"
 name="subprovider" style="margin-top: 5px">
 $message:remove-subprovider-button
 </t:removerowlink>
 </div>
 <p:addRow>
 <div class="col-3-4">
 <a t:type="addRowLink" t:mixins="LayoutButton"
 t:color="green" class="margin--top">
 <i class="fa fa-plus-circle"></i>
 $message:add-subprovider-button
 </a>
 </div>
 </p:addRow>
 </div>
</div>

In the frontend there is a dropdown menu entityContractSubproviderSubCategoryofoutsourcedserviceRequired that gets filled with new choices when another dropdown menu entityContractSubproviderCategoryofoutsourcedserviceRequired value changes.

<div data-fragment-container="categoryofoutsourcedserviceSubproviderContainer">
 <div class="form__row">

 <div class="col-1-4 inline">
 <div t:type="LayoutSelectList"
 t:model="entityCategoryofoutsourcedserviceModel"
 t:id="entityContractSubproviderCategoryofoutsourcedserviceRequired"
 t:value="subprovider.categoryofoutsourcedservice"
 t:valueEncoder="categoryofoutsourcedserviceValueEncoder"
 t:blankOption="ALWAYS"
 t:mixins="ExclusiveTriggerFragment,DpmFormGroup"
 data-for-trigger-group="categoryofoutsourcedserviceSubproviderGroup"
 data-fragment-container-id="categoryofoutsourcedserviceSubproviderContainer"
 t:async="true"
 zone="categoryOfSubModelZone"/>
 </div>
 <div class="form__row" t:type="if" t:test="true"
 t:id="entityContractSubproviderSubCategoryofoutsourcedserviceRequired">
 <div data-fragment-trigger="CRM, ICT, CONTROLFUNCTIONS, REPORTING, RISKMANAGEMENT, TREASURY, SECURITIES, PAYMENTS, OTHER" t:type="formFragment"
 data-trigger-group="categoryofoutsourcedserviceSubproviderGroup"
 data-fragment-detection="any"
 t:visible="subproviderCategoryofoutsourcedserviceActive">
 <div class="form__row">
 <t:zone t:id="categoryOfSubModelZone" id="categoryOfSubModelZone" style="display: inline;">
 <div class="col-1-4 inline">
 <div t:type="LayoutSelectList" t:blankOption="ALWAYS"
 t:model="entitySubCategoryofoutsourcedserviceModel"
 t:label="message:entityContractSubproviderSubCategoryofoutsourcedserviceRequired-label"
 t:value="subprovider.subcategoryofoutsourcedservice"
 t:valueEncoder="subCategoryOfOutsourcedServiceValueEncoder"
 t:mixins="ExclusiveTriggerFragment,FormGroup"/>
 </div>
 </t:zone> 
 </div>
 </div>
 </div>
 </div>
</div>

The problem is whenever I add a new row and change the category dropdown choice , the subcategory menu changes in all the rows. I want it to be changed in its own row only