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

  connect() {
  }

  async fetchData(event) {
    const templateId = event.target.value;
    if (!templateId) {
      this.clearFields();
      return;
    }
    
    const url = `/id_card/plans/${templateId}/get_plan_benefits`
    const response = await fetch(url);
    const templateBenefitsData = await response.json();

    this.#updateFields(templateBenefitsData)
  }

  clearFields() {
  }

  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}`);
      }
    });
  }
}

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