Change input value on click when there is more than one paragraph

Question

There are two fields on my paragraph.

1. A number field
2. A text field

I want to change the value of the text field when I click on the number field.

Here's my script so far which is only good on the first paragraph because of field_my_content_paragraph_field[0]:

/**
 * @file
 * Javascript behaviors.
 */

(function ($, Drupal) {

  "use strict";

  /**
   * Handle paragraph fields on the node edit form.
   */
  Drupal.behaviors.myBehavior = {

    attach: function (context) {
      $('input[name="field_my_content_paragraph_field[0][subform][field_my_number_integer_field][0][value]"]', context).on('click', function () {
        var myNumberFieldValue = $('input[name="field_my_content_paragraph_field[0][subform][field_my_number_integer_field][0][value]"]').val();
        var myInputTextFieldValue = $('input[name="field_my_content_paragraph_field[0][subform][field_my_input_text_field][0][value]"]');

        switch (myNumberFieldValue) {
          case '1':
            myInputTextFieldValue.val('A');
            break;
          case '2':
            myInputTextFieldValue.val('B');
            break;
          case '3':
            myInputTextFieldValue.val('C');
            break;
        }
      });
    }
  };

})(jQuery, Drupal);

When there is a second paragraph on the node, the field names for the second paragraph are:

name="field_my_content_paragraph_field[1][subform][field_my_number_integer_field][0][value]"

name="field_my_content_paragraph_field[1][subform][field_my_input_text_field][0][value]"

How can I loop through the paragraphs, (or is it the DOM at this point?) so the text field value of the paragraph I'm in is changed on click?

Answer 1

I need to loop through the paragraphs with an .each() like so:

/**
 * @file
 * Javascript behaviors.
 */

(function ($, Drupal) {

  "use strict";

  /**
   * Handle paragraph fields on the node edit form.
   */
  Drupal.behaviors.myBehavior = {

    attach: function (context) {
      $("input[name$='[subform][field_my_number_integer_field][0][value]']").each(function (i) {

        $('input[name="field_my_content_paragraph_field[' + i + '][subform][field_my_number_integer_field][0][value]"]', context).on('click', function () {

          var myNumberFieldValue = $('input[name="field_my_content_paragraph_field[' + i + '][subform][field_my_number_integer_field][0][value]"]').val();
          var myInputTextFieldValue = $('input[name="field_my_content_paragraph_field[' + i + '][subform][field_my_input_text_field][0][value]"]');

          switch (myNumberFieldValue) {
            case '1':
              myInputTextFieldValue.val('A');
              break;
            case '2':
              myInputTextFieldValue.val('B');
              break;
            case '3':
              myInputTextFieldValue.val('C');
              break;
          }
        });
      });
    }
  };

})(jQuery, Drupal);

Which solves the problem.