automate employer setup import from word and manual entry working

app/javascript/controllers/benefits_template_picker_controller.js

@@ -2,7 +2,10 @@ import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
   static values = { url: String };
-  static targets = ["benefit_1", "benefit_2", "benefit_3", "benefit_4", "benefit_5", "benefit_6", "benefit_7", "benefit_8", "benefit_9", "benefit_10", "benefit_11", "benefit_12", "benefit_13", "benefit_14"];
+  static targets = ["benefit"];
+
+  connect() {
+  }
 
   async fetchData(event) {
     const templateId = event.target.value;
@@ -11,25 +14,27 @@ export default class extends Controller {
       return;
     }
     
-    const url = "/id_card_benefits_templates/get_templates_benefits/:id".replace(':id', templateId);
+    const url = `/id_card_benefits_templates/get_template_benefits/${templateId}`
     const response = await fetch(url);
     const templateBenefitsData = await response.json();
 
-
-
-    this.nameTarget.value = templateData.name;
-    this.descriptionTarget.value = templateData.description;
+    this.#updateFields(templateBenefitsData)
   }
 
   clearFields() {
-    this.nameTarget.value = '';
-    this.descriptionTarget.value = '';
   }
 
-  updateFields(templateBenefitsData) {
-    templateBenefitsData.forEach(function(benefit) {
-      const propertyName = `benefit_${benefit.sequence}`
-      this[propertyName].value = benefit.benefit
+  async #updateFields(templateBenefitsData) {
+    const benefitTargetsList = this.benefitTargets
+    templateBenefitsData.forEach(function(bene) {
+      const targetElement = benefitTargetsList.find(
+        (element) => element.dataset.sequence == bene.sequence
+      );
+      if (targetElement) {
+        targetElement.value = bene.benefit;
+      } else {
+        console.error(`Target not found for sequence: ${bene.sequence}`);
+      }
     });
   }
 }