(function ($, Drupal, once) {
  Drupal.behaviors.addRowVisibility = {
    attach: function (context, settings) {
      function toggleButton() {
        var sourceField = $('.source-field', context);
        var destinationField = $('.destination-field', context);

        // Ensure source and destination fields exist before checking values
        if (sourceField.length > 0 && destinationField.length > 0) {
          var sourceFilled = sourceField.find('option:selected').length > 0;
          var destinationFilled = destinationField.val().trim().length > 0;
          // Show/hide button based on whether both fields are filled
          if (sourceFilled) {
            $('.form-submit[value="Add Row"]', context).show();
          } else {
            $('.form-submit[value="Add Row"]', context).hide();
          }
        } else {
          console.error('Source or destination field is missing');
        }
      }

      once('toggleButton', '.source-field, .destination-field', context).forEach(function (element) {
        $(element).on('change keyup', toggleButton);
      });

      toggleButton(); // Run initially to set the correct state
      
    }
  };
})(jQuery, Drupal, once);