baclight/app/javascript/controllers/benefits_template_picker_controller.js

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"];

  async fetchData(event) {
    const templateId = event.target.value;
    if (!templateId) {
      this.clearFields();
      return;
    }
    
    const url = "/id_card_benefits_templates/get_templates_benefits/:id".replace(':id', templateId);
    const response = await fetch(url);
    const templateBenefitsData = await response.json();



    this.nameTarget.value = templateData.name;
    this.descriptionTarget.value = templateData.description;
  }

  clearFields() {
    this.nameTarget.value = '';
    this.descriptionTarget.value = '';
  }

  updateFields(templateBenefitsData) {
    templateBenefitsData.forEach(function(benefit) {
      const propertyName = `benefit_${benefit.sequence}`
      this[propertyName].value = benefit.benefit
    });
  }
}

// this[propertyName]
// const propertyName = `${valueName}Value`;